ى 
CSS3.,HTMLS5‏ 
"الخطوة الأولي نحو البرمجة للويب" 


ESS HTML 


بدر عبدالعزيز الإبراهيم 
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HTML5 & 313‏ 
(الخطوة الأولى نحو البرمجة للويب) 


المهندس مختار سيد صالح 


تحميل المزيد من الكتب : www. learn-barmaga.com‏ 


تحميل المزيد من الكتب : www. learn-barmaga.com‏ 


جميع الحقوق محفوظة للمؤلف 
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الإهداء 


إلى أعلى نخلتين على ضفاف القلب ... 


والديّ حفظهما الله. 
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نویه 


فرغتُ من تأليف هذا الكتاب في الأشهر الأولى من عام ٠ ۲١٠١‏ و كنت قد عقدث العزمَ على 
إصداره مطبوعاً كأوّل كتاب عربيٌ في موضوعه » حاذياً بذلك حذو أخيه و سابقه (تعلّم /ا“©لا0[ 
في ٠٠١‏ دقيقة) » لكنّ مشيئة الله قضت ألا تتهيّأ الظروف الملائمة لذلك حتّى هذه اللحظة بعد 
انقضاء خمسة و عشرين شهراً على إتمامه » و لأنّني أؤمن أنَّ قيمة عملٍ كهذا تتضاءل مع مرور 
الوقت فقد رأيت -بعد تفكير- أن أنشره مخلصاً بشكلٍ مجّاني بصيغة الكتاب الإلكترونيّ (501) 


لعل أحد الدارسين ينتفع به لما كان نشره بهذه الصّيغة لا يتطلب متي أكثر من كتابة هذه الأسطر. 


مختار 


٠١/5/٠١ البوكمال‎ 


تحميل المزيد من الكتب : 


1١ 
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بين يدي الكتاب 


بسم الله الرّحمن الرّحيم » و الصّلاة و السّلام على نبيّنا محمّدِ و على آله و أصحابه أجمعين» و 


بعد: 


لم يَعْد ال ۷۷66 اليوم مقتصراً على تقديم المعلومة بشكل نصّي بسيطء حيث أصبح من المهم تقديم 
المحتوى بشكل و أسلوب أقرب ما يكون إلى الإعلاميء بل ربّما هو كذلك فعلاًء فقد أصبح من 
النادر -برأيي- أن تجد في مواقع ال ۷/6 اليوم -و أعني المواقع الجيدة منها- ما لا يقدم 
المعلومات بشكل مسموع و مرئي إضافة إلى الشكل التقليدي المقروء و هذا من ناحية» أما من 
الناحية الأخرى فقد تطوّر ال ۷6 ذاته كفهوم مع بدء التنظير لما يعرف بال 2.0 ۷۷66 عام 
57»؛ و هذا ما أذَى بالنتيجة إلى ظهور الحاجة لتطوير الأدوات و اللغات البرمجية التي كانت 
بين يدي مطوري و مصممي مواقع ال ۷/61 و التي أصبحت قاصرةً عن تحقيق متطلبات العملاء 
الطموحين بامتلاك مواقع ويب عصرية و التي سرعان ما قام من يهمه أمر التقنية بتطويرها و تقديم 
إصدارات جديدة منها أقوى و أكثر تأقلماً مع ©//ا اليوم» ذلك لأنّ "التأقلم يعتبر أساس النجاح في 
عالم ال ماعل/الا". 


يناقش هذا الكتاب أحدث إصدار لكل من لغتي ١111/1‏ و 055 اللتان تعتبران الخطوة الأولى 
لأي مُطَوّر ۷۷66 إذ يقوم بشرح لغة 111/15 بعد التمهيد لذلك من خلال شرح 171/1 التقليدية 
من الصفر و من ثمَّ معايير 171/1 من الصفر أيضاًء كما يقدّم هذا الكتاب شرحاً مفصّلاً ل 
3 بعد التمهيد لذلك من خلال شرح 055 التقليدية من الصفر أيضاًء و بهذا فإن هذا الكتاب 
يتألف من فصلين: 
-١‏ 1۲1-5: يناقش هذا الفصل الإصدار الخامس (و الأحدث) من لغة البرمجة النصيّة 
التشعبيّة ا1۲۷ بشكل مفصّل و مندرّج و يضمن لقارئه أن يكون قادراً على كتابة 


صفحات ويب بالمحتوى الذي يرغبه و بالشكل الذي يريده بإذن الله. 
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-١‏ 0553: يناقش هذا الفصل كامل المزايا التي يقدمها الإصدار الثالث (و الأحدث) من 
أوراق الأنماط الانسيابيّة 55© بشكل بسيط و مفهوم» و يعد قارئه أن يكون قادراً على 
تجميل المحتوى الذي قدّمه في صفحات الويب التي تعلّم كتابتها في الفصل الأوّل. 

“- كي يكتمل الحديث عن البرمجة للويب من طرف العميل 5108 011601 كان يجب أن 
يكون هناك فصل ثالث يتحدث عن لغة 56/101 4۷2ل و لكن و لأنني من أنصار الحداثة 
(و السهولة) فيما يتعلق بالتقنيات البرمجية فأنصح القارئ العزيز بقراءة كتابي 'تعلّم 
۷ز في ٠٠١‏ دقيقة" أو أي مرجع يتحدث عن لغة 6۲۷ا ۵ز بشكل واضح و مبسّط 
بعد قراءة هذا الكتاب أولاًء لأن /ا/©لا©ز هي البديل العصري للغة 561104 ۷4هل برأيي. 


أَمَا عن طريقة عرض الأفكار في هذا الكتاب فقد حاولت و اجتهدت كي أجعلها غير مملّة و لا 
معفّدة و لا شبيهة بالمحتوى المتعب الذي كثيراً ما عانيت منه في الكتب التي تناقش لغات البرمجة 
للأسف و يمكنني أن أقول أن هذا الكتاب لا يفجّر عشرات الأسطر البرمجيّة غير المفهومة دفعة 
واحدةً في وجه قارئه دون توضيح لهاء كما أنه لا يطيل أكثر من المطلوب في عرض الفكرةء لكنه 
باختصار يقول ما يجب قوله فقط دون أن يغفل أي جانب من الجوانب التي تتوجب معرفتها. 

ختاماً أسأل الله أن يتقبّل هذا العمل و أن يبارك فيه و يكتبه صدقة جارية من باب العلم الذي ينتفع 


به و أن يلهم قارئه الفهم و الحفظ و الصبر على التعلم. 


البوكمال ۲۰۱۱/۸/۲۸ 
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الفصل الأول 


HTML 5 
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مقدمة 


يناقش هذا الفصل لغة 5ا1۲ التي تعتبر حجر الأساس في إنشاء مواقع الويب» و لأثّنا لا 
يمكن أن نتحدث عن 1۲11-5 مباشرةً فسيناقش هذا الفصل لغتي ا17 و 171/1 أولاًء و 
البداية مع لغة 111/1ا. 


ما هي HTML‏ ؟ 


إن 1101لا هي اختصار 30016113100 الحروف الأولى من الجملة Hyper Text Markup‏ 
٠6‏ و التي تعني بترجمة غير حرفية (لغة وصف صفحات الويب)'» و هي ليست لغة 
برمجيّة» لاء بل هي لغة وصفيّة ©23107910039ا Markup‏ لأنَّ 111/1 تستخدم مجموعة من 


الوسوم 13905 لوصف صفحة الويب. 


أا الوسوم 1305 فهي كلمات أو أحرف محددة مسبقاً 0105//الا©»! تحمل معاني خاصّة» و تكون 
محصورة بين قوسين من الشكل < > مثل <0> و <14001>: تأتي الوسوم في الغالب على شكل 
أزواج مثل <ط> و <0/>» يدعى الوسم الأول <0> بوسم البداية 739 86017 أو وسم الفتح 
9 0060159. و يدعى الوسم الثاني <0/> بوسم النهاية 139 550 أو وسم الإغلاق 


.Closing Tag 


يتم كتابة مستندات ا1۲۷ باستخدام أي محرر نصي بسيط (مثل 0016030) أو متقدّم (مثل 
DreamWaver‏ أو 0٥‏ انا5ألا)» و يتم تخزينها في ملفات تحمل امتداداً 7]605100© من 


الامتدادين التاليين : 5]101. أو 400.» و بالطبع لا يوجد أي فرق بينهما. 


' لا أعرف إن قام أحد قبلي بترجمتها بهذه الطريقة لكتّني أشعر أنها الترجمة الأنسب. 
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تتكون مستندات ا١1‏ بشكل أساسي من محتوى نصي عادي بالإضافة إلى مجموعة من وسوم 
االاا1لاء و في الحقيقة فإن مستندات ا1۲۷ تدعى ب(صفحات الويب) 239065 5عل/الاء و يتم 
استخدام برنامج خاص لقراءة هذه المستندات يعرف هذا البرنامج باسم مستعرض الويب Web‏ 


200/561 و من أمثلته Internet Explorer‏ و Firefox‏ و Google chrome‏ .. إلخ. 


الهدف من مستعرض الويب هو قراءة مستندات HTML‏ و عرضها بشكل صفحات ويب» بمعنى 
أن مستعرض الويب لا يعرض وسوم ا1۲۷ كنصوص بشكل مباشر و لكنّه يستخدمها لإنتاج 


كيف أبدأ في تعلم كتابة مستندات 1111/1 ؟ 

كل ما تحتاجه لكي تبدأ في تعلم كتابة مستندات 111/1 هو محرر نصوص (مثل 2016030) و 
مستعرض ويب (مثل “01016 1016/7©1): بعد ذلك يمكنك قراءة الفقرات التالية و التعلم خطوة 
بخطوة و أؤكد لك أنّ أفضل طريقة للتعلم -برأيي- هي كتابة الأمثلة التي ستصادفك لاحقاً بشكل 


مباشر باستخدام محرر النصوص و من ثمَّ اختبارها باستخدام مستعرض الويب. 
المثال الأوّل في لغة 11/11!! 
سنقوم الآن بكتابة أول صفحة ا1۲۷ معاً باتباع الخطوات التالية: 
نقوم أولاً بفتح أحد محررات النصوص و ليكن المفكرة 72/016020 على سبيل المثال و نكتب 
الشيفرة التالية: 
<html>‏ 


<head> 


E E LOZ 


My first HTML page 
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SE EES 
</head> 
<body> 
<P> 
Welcome to my first HTML page! 
Ez 
BOI 


> 101 


ثْمَّ نقوم بحفظ الملف بام firstPage.hm|‏ 


| firstPage.html - Notepad <, 
سے یلرل‎ 2 | Save كه‎ 
File Edit 


HERS ۰ : > © Desktop ٠١ 


Organize > New folder 


* Favorites Libraries 

WI Desktop 2 System Folde 
Jp Downloads 

Recent Places | » Mukhtar‏ و 


9 Libraries 


Computer 


Documents i system rola‏ يأك 


«Û, Music 
يكل‎ Pictures Network 
B Videos E system Folde 
س“‎ 
IM Computer vr _AppDev 
File name: "firstPage.html'| 


Save as type: [Text Documents (*.bxt) 


* Hide Folders Encoding: ANSI -| | Cancel 


الشكل ١‏ : كتابة أول شيفرة ا1۳ في برنامج المفكرة و حفظ الملف 
ملحوظة : لحفظ الملف بلاحقة مختلفة عن اللاحقة ×ا. هناك طريقتان» الأولى أن نختار الخيار جميع الملفات 
*.* من القائمة المنسدلة حفظ ك 1/06 35 5317/6 الظاهرة في الصورة أسفل اسم الملف ثم نكتب اسم الملف و 
لاحقته بشكل عاديء أمّا الثانية و التي أفضّلها شخصيًاً فهي أن نضع اسم الملف مع لاحقته المطلوبة بين علامتي 


اقتباس مزدوجتين و نختار حفظ كما هو موضّح في الصورة أعلاه. 
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WWW . 


الآن و بعد أن قمنا بحفظ الملف بالاسم 115]906.51/01 نقوم باستعراضه باستخدام أحد 
مستعرضات الويب و لیکن 8 21067“ 1716/7©1 على سبيل المثال لنشاهد الشكل النهائي 
للصفحة كمايلي: 


72 My first HIML page - Windows Internet Explorer 


< | € c:1\Documents and SettingsiM ¥) اج‎ X 27 


2 r @my first HTML page | 8A ˆ” لهذ‎ 


2> 
fh + |: Page + IGF Tools - 


Welcome to my first HTML page! 


Done و‎ My Computer 


الشكل ۲ : الشكل النهائي في المستعرض لأوّل صفحة مكتوبة باستخدام 1۲۷1 
كما ترى فقد قمنا بكتابة صفحتنا الأولى باستخدام لغة ا١1۲‏ و هذه الصفحة تحتوي على نص 
ترحيب بسيط هو النص !©0960 11/1 1ا elcome 10 my first‏ تم توليد هذا النص باستخدام 
الوسم الخاص م و بتصوّري فإنّ هذه الصفحة على بساطتها ستكون الباب الواسع للدخول إلى لغة 
111 إِنْ قرأت الفقرات التالية بقليل من التركيز. 


عناصر 471/1 


تتكون كل صفحة من صفحات ا/111آ! من مجموعة من العناصر 1817610715 يتم إنشاؤها 
باستخدام الوسوم 1395 و الوسوم كما قلنا سابقاً عبارة عن أحرف أو كلمات تحمل معاني خاصة 
بالنسبة لمستعرض الويب و غالباً ما تكون أسماء الوسوم عبارة عن اختصارات لكلمات إنجليزيّة 
فالوسم <0> مثلاً يستخدم لإنشاء العنصر المسؤول عن عرض مقاطع النصوص 53/39/2005 
ضمن صفحات ا11 و الذي سيتم مناقشة عمله مع عمل باقي الوسوم بشكل تفصيلي في 
الصفحات التالية. 
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تحصر الوسوم بين أقواس من الشكل < > و من أمثلتها الوسم <51001> و الوسم <5680> و 
الوسم <11118> و الوسم <ل8001> و الوسم <0>. 
18 
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لكل عنصر من عناصر ا11 وسم بداية 139 86017 و وسم نهاية 130 ۸۵ع تكون وسوم 
البداية محصورة بين القوسين < > أمّا وسوم النهاية فتكون محصورة بين القوسين السابقين مضافاً 
إليهما رمز الخط المائل / المعروف ب 5/350 بالشكل < /> و من أمثلة وسوم النهاية الوسم 
</html>‏ و الوسم </head>‏ و الوسم </title>‏ و الوسم </body>‏ و الوسم </p>‏ و يحوي كل 
عنصر من عناصر ا1۲ بين وسمي بدايته و نهايته نصًاً عاديا لعرضه (كما فعل العنصر م 
في مثالنا السابق) و يمكن أن يحوي أي عدد آخر من عناصر ا1۲۷ شرط الالتزام بترتيب 
متناظر لوسوم النهاية و البداية» فعند كتابة وسوم النهاية يجب أن يُراعى الترتيب فيتم كتابة وسم 
النهاية الخاص بوسم البداية غير المنتهي (الذي ليس له وسم نهاية) الأقرب فالأقرب» ففي حين أن 
الترتيب التالي يعتبر صحيحياً: 
1121 0ك 
<body>‏ 
O‏ 
E E OEE =‏ الك للك 5 ! 
Pz‏ 


</body> 


EE, 


لأنّ وسم النهاية الأول <م/> جاء لإنهاء أقرب وسم بداية غير منتهي و هو <0> في مثالناء ثم 
جاء وسم النهاية </0001/> لإنهاء أقرب وسم بداية غير منتهي و هو <[000©» ثمَّ جاء وسم 
النهاية <ا"٣۲٣/>‏ لإنهاء أقرب وسم بداية غير منتهي و هو <ا")۸>. 

فإِنّ الترتيب التالي يعتبر خاطئاً: 


<html> 


<body> 


٠6 | 
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<P> 
</body> 
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E 


لأن وسم النهاية <رإل١هط/>‏ جاء لإنهاء الوسم <رإلهط> الذي لم يكن الوسم الأقرب غير المنتهي 
للأسف و الحالة نفسها تكررت مع وسمي النهاية <01مأط/> و <0/>. 


الخلاصة: لا تنسّ كتابة وسم الإغلاق و راع ترتيب وسوم الإغلاق. 


White Spaces الفراغات‎ 


في لغة ا1۲ لا يوجد أي قيمة لمحارف الفراغات (مثل 50966 و 1358 .. إلخ) عند استعراض 
الصفحات باستخدام مستعرض الويب و إنّما تستخدم محارف الفراغات لغرض ترتيب الشيفرة و 
جعلها مقروءة بشكل أوضح فقطء فقراءة شيفرة 111/1] التالية على سبيل المثال: 


IA لهي‎ > 
<body> 
21 
Hi! 
ARLES 


< OOO 


€ BEMIS 


أسهل بكثير من قراءة شيفرة ا1١۳‏ التالية: 


12 اجون ةق د رو رك ترج نز د ووو 1-5 0 1 
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مع أنّهما متمائلتان تماماً عند استعراضهما باستخدام مستعرض الويب. 


فائدة : من العادات البرمجيّة الجيدة إزاحة كل المحتوى الموجود بين وسمي بداية و نهاية متماثلين بمقدار ضغطة 


0 و البعض يفضتل إزاحتها بمقدار ثلاث فراغات (ثلاث ضغطات على مفتاح ©50966). 


الشكل العام لعناصر ‏ ا1۲۷ 


يتم وصف عناصر 111/1 باستخدام الوسوم» و فيمايلي نعرض الشكل العام لعنصر ا 1۲: 


ه يبدأ عنصر ا11 بوسم البداية 129 5أو86. 

« ينتهي عنصر ا11 بوسم النهاية 1390 00ح]ا. 

« كل ما يتم كتابته بين وسمي البداية و النهاية يدعى محتوى عنصر ا11۷ علماً أن هناك 
بعض العناصر التي لا تحوي أي محتوى و التي تسمى عديمة المحتوى. 

» يندمج وسما البداية و النهاية في وسم واحد في حالة العناصر عديمة المحتوى. 

« يتم تمرير مجموعة من الخصائص لأغلب عناصر ا11 في وسم البداية عن طريق 


.Attrib utes الواصفات‎ 


ملحوظة: دائماً و أبداًء قم بكتابة عناصر ا1۲ بالأحرف الإنجليزيّة بحالتها الصغيرة ٥258‏ /6/لا0ا. 


لنشاهد الأمثلة التالية: 


<p> Welcome to my website. </p> 
<a href="index.htm"> Go to index </a> 
<hr /< 


دل كل سطر في الجدول السابق عنصراً من عناصر ا1۲۷ في الصفحة بشكل تخيّليء 


فالعنصر الأول يبدأ بالوسم <0> و ينتهي بالوسم <0/> و يحوي المحتوى النصي 10 ©070جاعل/الا 


تحميل المزيد من الكتب : 


516 ۷" بينما يبدأ العنصر الثاني بالوسم <"1706«“.5100"-1/6 3> و ينتهي بالوسم <9/> 
و يحوي المحتوى النصي “©1706 10 60 مع إسناد القيمة 17067.17 إلى واصفته ۲6۴٠ء‏ في 
حين أنَّ العنصر الثالث عديم المحتوى يتكون من اتحاد وسمي البداية و النهاية في وسم واحد 
بالشكل </ 0 ط>. 


الشكل العام لصفحات HTML‏ 
تتكون كل صفحة ا۳11 من ثلاث مناطق: 


©» منطقة جسد الصفحة 5661100 :Body‏ 
و هي المنطقة المحصورة بين وسمي </ا5800> و </ا200/> و هذه المنطقة هي التي 
تنتج الشكل النهائي للصفحة و تضم جميع العناصر التي تمتّل المحتوى الظاهر للصفحة 
و الذي سيظهر في مستعرض الويب عند استعراض هذه الصفحة و بالطبع فإن الجزء 
الأكبر من عناصر ا11۷ سيكون في هذه المنطقة. 

منطقة رأس الصفحة :Head Section‏ 
و هي المنطقة المحصورة بين وسمي <5630> و <7630/> و هذه المنطقة تحوي 
مجموعة من عناصر ا11۷ أغلبها لا يظهر في مستعرض الويب عند استعراض 
الصفحة و لكن المهمة الرئيسية لهذه المنطقة هي إعطاء معلومات عن ماهيّة المحتوى 
الموجود بالصفحة إضافة لبعض المعلومات غير الظاهرة الأخرى و التي تستخدمها 
محركات البحث من أجل الأرشفة و البحث في الغالب. 

© المنطقة الما 


' لم يرد هذا المصطلح في أي من المراجع التي قرأتها و إِنّما هو اجتهاد شخصي لتبسيط الفكرة المطروحة (برأيي). 
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و هي المنطقة المحصورة بين وسمي <html>‏ و </html>‏ و هذه المنطقة هي المنطقة 


التي تحدد بداية و نهاية الصفحة و هي التي تضم منطقتي الرأس و الجسد و بهذا فهي 
تضم كامل مستند (صفحة) 1۲1 . 


و بهذا يكون الشكل العام لأي مستند ا1۷ كمايلي: 


EM. 
<head> 
محتوى منطقة الرأس غير الظاهر سيكون هنا‎ 
</head> 
<body> 
EE SE ENE E ES CEE Ce 


>71 


> 


واصفات الوسوم Attributes‏ 


يتلخّص كل ما قلناه سابقاً بأنَّ لغة ا1۲۷ تتيح لك تقديم المحتوى عبر إنشاء مجموعة من 
العناصرء مهمة كل عنصر من عناصر ا11۷ عرض شيء محدد جداً في صفحتك فهناك 
عناصر لعرض النصوص و هناك عناصر لعرض الصور و هناك عناصر لعرض الروابط 
التشعبيّة 015أا .. إلخ» يتم إنشاء كل عنصر من هذه العناصر بواسطة وسم خاص من وسوم 
لاا[ 1اء و يكون لكل عنصر وسم بداية و وسم نهاية يحصران محتوى العنصر الظاهر بينهما. 

يمكن تزويد بعض وسوم البداية بمجموعة من الخصائص الإضافيّة و التي تخصّص سلوك عرض 


العنصر لمحتواه و يتم هذا عبر ما يعرف بالواصفات 48117120065, انظر للشيفرة التالية على سبيل 
المثال: 


ار 
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<p align="center"> 


Ga DE CE EEE EE 


</B> 

كما تلاحظ فقد قمنا بإضافة شيء جديد في هذه الشيفرة إلى وسم البداية الخاص بالعنصر م ألا و 

هو الواصفة 3191 التي تحدد محاذاة النص الذي سيعرضه العنصر م و أعطيناها القيمة ,©0601 
لعرض النص في منتصف الصفحة و عند استعراضها سيظهر النص كمايلي: 


® ® ف إبئ‎ ê @\Uers\MukhtaNDocurîents\My rm 3 Google 


Favorites 0 3 SQL Injection and Cross-Si... ©8( 1000 Popular jQuery Plugi...‏ + ا 


1 سج‎ << 
© C\Users\Mukhtar\Documents\MY ... مه - جم‎ vi Hyp + عووم‎ + Safety + Tools > © - 


المحتوى النصي لعنصر عرض النصوص 


Computer | Protected Mode: Of f” ©1256 >‏ 
الشكل ١‏ : عنصر عرض النصوص <> عند إضافة واصفة المحاذاة "وناج 

حسناًء يوجد لكل وسم بداية من وسوم ا١1‏ مجموعة معروفة سلفاً من الواصفات 0165ا2115 و 
يوجد لكل واصفة مجموعة معروفة سلفاً من القيم التي يمكن أن يتم إسنادها إلى الواصفة» فالواصفة 
0 هي إحدى الواصفات المعروفة سلفاً لوسم البداية <م> على سبيل المثال و القيم التي يمكن 
أن تسند إليها هي |٠١‏ لمحاذاة النص إلى اليسار أو 119114 لمحاذاة النص إلى اليمين أو 660161 
لمحاذاة النص إلى الوسطء و سيتم بالطبع عرض واصفات كل وسم بالتفصيل عند الحديث عنه و 
أظن أنه لا داعي للقول أن الشكل العام للواصفة هو 2(06/"-73076" حيث أنَّ 023176 هو اسم 
الواصفة و 3/06 هي القيمة المُستدة لتلك الواصفة و التي يجب أن توضع بين علامتي اقتباس 


مزدوجند ن 0 أو علامتي اقتباس مفردتين ا 


ملحوظة : يجب أن تتم كتابة وسوم و واصفات ا1۲۷ بحروف إنجليزيّة صغيرة ٥258‏ 67ل/لا0 ا. 


٤ 
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أظن أنَّنا نستطيع الآن أن نبدأ بالحديث عن عناصر ا11۷ كافة و بالتفصيل و البداية مع 
عناصر العناوين 16301095!» و لكن قبل ذلك سنعرض جدولاً بمجموعة من الواصفات المشتركة 


بين أغلب وسوم ا1 هنا بدلاً من تكرارها مع كل وسم من تلك الوسوم» و فيمايلي الجدول: 


اسم الواصفة القيم الممكنة الشرح 
id‏ اي اسم فريد(غير مكرر) | يتم استخدام هذا الاسم للتعامل مع العنصر برمجيّاً 
بالنسبة للمستند باستخدام لغة 56106 vaھل‏ أو ›jQuery‏ و لها 
استخدامات أخرى سيتم عرض أحدها في فقرة 
الروابط الداخلية لاحقاً 
Itr dir‏ لتحديد اتجاه القراءة» |٣١‏ تعني أن اتجاه القراءة من 
11 اليسار إلى اليمين أمّا |1 فتعني أن اتجاه القراءة من 
اليمين إلى اليسار 
left align‏ لتحديد محاذاة النص 
right‏ 
center‏ 
justify‏ 
class‏ أي اسم فئة 55© صالح |لمنح كافة خصائص الفئة إلى العنصر و سيتم 
مناقشة هذا بالتفصيل في الفصل الخاص ب 6553© 
name‏ أي اسم فريد تستخدم لتمييز العنصر برمجياً 


الجدول ١‏ : جدول الواصفات المشتركة بين أغلب عناصر ا1۲۷ 


Yo 
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عناصر العناوين Headings‏ 


توفر لغة ا/111] سنّة عناصر لعرض العناوين و هي على الترتيب: 81 و 52 و 583 و 54 و 
5 و ۸6 حيث أنَّ العنصر 1 هو أكبرها حجماً و العنصر ۸6 هو الأصغر و ما بينهما يتدرج 
في الحجم» و طبعاً حرف ال ١‏ هنا اختصار لكلمة 1830179آء دعنا نجرب الشيفرة التالية على 


ل لقال 


<html> 

<head> 

E E LOZ 
م ا نشم | العتكاصر الارن‎ 

دقل لع / > 

</head> 

BOY GIES EEL 
<21ط/>عنصر عنوان من المستوى الأوّل<1ط>‎ 
<22/>عنصر عنوان من المستوى الثاني<22>‎ 


المستوى الثالث<3!> 


<23/>عنصر عنوان من 
<24/>عنصر عنوان من المستوى الرابع<24> 
<25/>عنصر عنوان من المستوى الخامس<5ط> 
<26/>عنصر عنوان من المستوى السادس<26> 
</body>‏ 
</html>‏ 


عند استعراض الصفحة السابقة في مستعرض الويب سنشاهد النتيجة التالية: 
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حك چ 


©» 8 د‎ E CAUsers\Mukhta\Desktop\1.html > | “+ | X || 3| Google م‎ -| 
22 
Ti Favorites | 9 @] SQL Injection and Cross-Si.. @] 1000 Popular jQuery Plugi... 


vw Pagev Safety v Tools * © - 8‏ ص ها - له * آم صفحة اختبار لعناصر العناوين © 


ھ4 


عنصر عنوان من المستوى الأول 


عنصر عنوان من المستوى الثالث 
عنصر عنوان من المستوى الرايع 


عنصر عنوان من المستوى الخامس 


عنصر عنوان من المستوى السادس 


Computer | Protected Mode: Off 60 -| 9412596 >‏ تر 


الشكل ؛ : صفحة اختبار عناصر العناوين 81 إلى 56 
كما تلاحظ فقد قمنا بتزويد الوسم <body>‏ بالواصفة dir‏ و التي تحدد اتجاه قراءة حجسد المستند و 
قمنا بإسناد القيمة ا٣٣‏ لها و ذلك لنجعل اتجاه القراءة من اليمين إلى اليسار ها 10 1914 و هو ما 
يتناسب مع اللغة العربية بالطبع» و في حال أن هذه الواصفة لم تُعْط أية قيمة فإن القيمة 
الافتراضية لها هي |١‏ أي أن اتجاه القراءة الافتراضي من اليسار إلى اليمين. 


ملحوظة: استخدم عناصر العناوين <11> إلى <16> من أجل عناوين الفقرات فقطء و لا تستخدمها لجعل النص 


عريضاً أو كبير الحجم فهناك وسوم خاصة لهذين الغرضين. 


عنصر الخط الأفقي Horizontal Line‏ 


تقدّم لغة ا1۲ الوسم الخاص </ >۸١‏ لإنشاء الخطوط الأفقيّة في الصفحة» انظر للمثال التالي: 


<html> 


<head> 


۷ 
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<title> 
صفحة اختبار لعنصر الخط الأفقي‎ 
EEE 
</head> 
BOG GIES EES 
<ط/>محتوى الفقرة الأولى للتجربة فقط<م>‎ 
<hr /> 
وى الققرة لك اة االاتررة ات طون‎ 9< 
<hr /> 
م وى الققرة | كك ككس كلك 26 الك وفطدو‎ 
</body> 


> 


تبدو الشيفرة السابقة في مستعرض الويب كمايلي: 


@ صفحة اختبار لعنصر الخط الأفقي‎ - Windows Internet Explorer 


هك مه هسح نل | 
Google‏ |$ ا ظ2 4 | es E C\Users\Mukhtar\De:‏ 


qf Favorites | Şş @] SQL Injection and Cross-Si.. @] 1000 Popular jQuery Plugi... 


88 | » | © ...صفحة اختب‎ × ®” O + حا‎ 99 + Pager safety Tools v 


محتوى الفقرة الأولى للتجربة فقط 


محتوى الفقرةٍ الثانية للتجرية ققط 


محتوى الفقرة الثالثة للتجرية فقط | 


Done تقر‎ Computer | Protected Mode: Off eq v 984 


الشكل ٠‏ : صفحة تجربة العنصر </ ۴۲> 
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Comments التعليقات‎ 


اعتاد المبرمجون في لغات البرمجة التقليديّة على كتابة أسطر توضيحيّة لا ثعالج إذ أنها لا تعتبر 
جزءاً من الشيفرةء و إِنّما تستخدم فقط لتذكير المبرمج بأجزاء الشيفرة عندما يعود لتعديلها بعد فترة 
من الزمن» و هذه الأسطر تعرف بالتعليقات 01076115©: و مع أنَّ 111/1 لغة وصفية كما 
قلت سابقاً إِلّا أنها توفر آلية لكتابة التعليقات ضمن المستندات» فتقدّم الصيغة العامة التالية لكتابة 
التعليق: 


<! -- comment ==> 


لنشاهد المثال التالي على استخدام التعليقات ضمن مستند الا ! 1!: 


<html> 
<head> 


E E شك شت‎ E E EE E 
من ال الان البرمجيّة‎ E aa ELE LOZ 


</head> 

ا SOO GMa EEN‏ 
<-- السطرين التاليين للفقرة الأولى --!> 
</ > <م/>محتوى الفقرة الأولى للتجربة فقط<م> 
<-- السطرين التاليين للفقرة الثانية --!> 
ME‏ م do Y ON all EK‏ فرطم 
<-- السطر التالي للفقرة الثالثة --!> 
5 رى اال رة ال لةه لالت يروه لوصوو 


</body> 


CAMEL 


"| 
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تبدو الشيفرة السابقة كمايلي في مستعرض الويب مما يؤكّد أن التعليقات لا تظهر في المستند( أثناء 


استعراض الصفحة جرّب اختيار الأمر '"عرض-> المصدر" أو "06]نا50<-/لاهأ/”): 


لا Original Source‏ - e:///C:/Users/Mukhtar/Desktop/rstPage.htmlا‏ € فضافا إليها مجموعة من التعليقات البرمجيّة @ 


١ 8ه‎ CAUsers\Mukh File Edit Format 
ست‎ <html> 


صفحة اختيار لعتصر الخط <1+816+> نیا YF Favorites j @| SQL ni‏ 
الأفقي مضاقاً إل مجموعة من التعليقات اليرمجية eas‏ 2 
نه 5 a‏ × .-صفحة اختب © | » |7 88 
</head>‏ 
<body dir='rt1’'>‏ 
<-- السطرين التاليين للققرة الأولى --!> 
محتوى الققرة الأولى للتجرية <«2> 


محتوى الفقرة الأولى للتجربة فقط 


2 الفف د الثائئة الك 0 
التقهرة ‏ الأخروية رة دوه محتوى الفقرة الثانية للتجربة فقط 
<hr /<‏ 
التالي للققرة الثالثة --!> 
الققرة الثالثة للتجرية <«2> محتوى الفقرة الثالثة للتجربة فقط 
<م/>قفقط 
</body>‏ 


الشكل ٠‏ : التعليقات تظهر باللون الأخضر في نافذة عرض المصدر و لا تظهر في الصفحة 


ملحوظة: لا تنس إشارة التعجُّب بعد القوس الأول في بداية وسم التعليق. 


عناصر النصوص كامParagra‏ 

تتكون صفحة الويب في الواقع من مجموعة من الفقرات النصية في الغالب» يتم إنشاء هذه الفقرات 
باستخدام الوسم <0> و الذي مر معنا استخدامه في الأمثلة السابقة» و يستخدم الوسم </ 0۲> 
للنزول إلى السطر التالي و ذلك لأن محارف الفراغات بما فيها محرف المفتاح ٤٣٤6۲‏ ليس لها 
قيمة في لغة 1۲1 كما ذكرنا سابقاً. 

عناصر تنسيق النصوص 20110231110 ۲٥×٤‏ 


توفر لغة 111/1! مجموعة من العناصر لتنسيق النصوصء فلجعل النص عريضاً 8010 توفر 
العنصر <> (أو العنصر <512000>)» و لجعل النص مائلاً 43/16! توفر العنصر <> (أو 


تحميل المزيد من الكتب : 


العنصر <6107>)» و لوضع خط أسفل النص توفر العنصر <لا>» و لشطب النص 061٥۴6‏ توفر 
لعنصر <|06>. لنشاهد الشيفرة التالية على سبيل المثال: 
AER‏ 


<head> 


<ع1اt1/>صفحة‏ اختبار لعناصر تنسيق النصوص<»©811> 


</head> 
<body> 
<p> 
This is a sample text to demonstrate 
<b>bold</b>, 
<i>italic</i>, 


<u>underline</u> and 
<del>delete</del> tags. 


55 | ا‎ SN E ES 


<br/> 


You may use other tags to generate the same output: 
<br/> 
This is a sample text to demonstrate 
<strong>bold</strong>, 
<em>italic</em>, 
<u>underline</u> and 
<del>delete</del> tags. 
IB 


</body> 


83 
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</html> 


تبدو الشيفرة أعلاه في المستعرض كمايلي: 


@ صفحة اختبار لعناصر تنسيق النصوص‎ - Windows Internet Explorer 
عد انه اة اللاشة ف س ف سے‎ 
© 9 1 C\Users\ Mukhtar\Desktı 1 + “ز‎ | | Î Google 


ht Favorites چ‎ 0 SQL Injection and Cross-Si... 0 1000 Popular jQuery Plugi... 


|| 53 - » | © ..صفحة اختبا‎ × A - EO - كا‎ 2 + Page> safety Tools © + "| 


This is a sample text to demonstrate bold, /ta/ic, underline and tetete tags. 
You may use other tags to generate the same output: 


This is a sample text to demonstrate bold, /ta/ic, underline and tetete tags. 


¥ Computer | Protected Mode: Off 


الشكل ۷ : صفحة اختبار عناصر تنسيق النصوص 


ملحوظة: بالطبع هناك المزيد من عناصر تنسيق النصوص سيتم ذكرها في مرجع وسوم ا۷١1‏ في نهاية هذا 
الفصل. 


المحارف و الرموز الخاصّة Special Characters‏ 


هناك بعض المحارف و الرموز التي لا يمكن عرضها في الصفحة عن طريق كتابتها بشكل مباشر 
مثل الرموز المستخدمة في الرياضيات و محارف الفراغات و غيرهاء توفر لغة ا1۲ آلية خاصة 
لعرض هذه الرموز و ذلك باتباع الصيغة العامة التالية :81/106 باستبدل القيمة 2/06 بقيمة 
المحرف المطلوب أن يتم عرضه في مستعرض الويب و في الجدول التالي نماذج من هذه 
المحارف:" 


" للحصول على الجدول الكامل يمكن اتباع الرابط التالي: 
http://www.w3schools.com/tags/ref_symbols.asp‏ 
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الرمز شيفرة XHTML‏ 


&lt; < 
&gt; > 
&ne; ۶ 
&trade; ا‎ 
&copy; © 
&nbsp; محرف الفراع‎ 
الجدول ۲ : بعض المحارف الخاصة في ا1۲۷‎ 
لنشاهد المثال التالي:‎ 
AEM: 
<head> 
<title> 
مق اعكار ليعق المعارف الادة‎ 
< قا 1ع‎ 
</head> 
<body> 
<p> 
35 CELE 5 and NO ESE, 2 aNd د هد للكت‎ ene, 141E 
all rights reserved for &copy; Mukhtar &trade; 
م8‎ 
</body> 
TZBEMIEZ 


اذ 
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@ صفحة اختبار للمحار ف الخاصة‎ - Windows ]nternet Explorer 


e 8 C\Users\Mukhtaı v | é+ | >X( || الب‎ Google 


gh Favorites چ‎ © | SQL Injection and Cross-Si... @ | 1000 Popular jQuery Plugi... 


<2 5 5 
Pager Safety” Tools v‏ + 899 كا + 8 - ® صفحة اختبار للمحارف الخاصة @ 


3 < 5 and 10 > 2 and also 3 ¥ 4 .... all rights reserved for © Mukhtar ™ 


Dc ار‎ Computer | Protected Mode: Off gv 84 1 


الشكل ۸ : مثال لاستخدام بعض المحارف الخاصة في الصفحة 
عناصر الروابط Hyper Links‏ 


توفر لغة ا۳۲۷ آلية للانتقال بين الصفحات المختلفة عبر عناصر الروابط 15مأا /6ملإالاء و 
الروابط عبارة عن نصوص أو صور تتقلك عند النقر عليها من الصفحة الحالية إلى إلى صفحة 
ويب أخرى» تقوم مستعرضات الويب بتمييز الروابط بعرض 'يد صغيرة" كمؤشر للفأرة عند الإشارة 
إلى أحد الروابط» و يتم إنشاء الروابط بواسطة الوسم <3>». و ال 3 هذه اختصار ل 80061501 » يتم 
تزويد عنصر الرابط بنص يُعرض كمحتوى له أمّا الموقع الهدف (الذي سيتم الانتقال إليه عند النقر 
على الرابط) فيتم تزويده للواصفة 56 و التي هي اختصار ل 1616/6006 Hyper‏ فللنظر 
للمثال التالي: 

السك مك 


<head> 


CIE ME e 


BNL N العتامر‎ AE 
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ت!! 28> 


</head> 


<body> 
<a href="http: //www.microsoft. 2ط><3/>ما يكر وسوفت<'"010»‎ /> 
<a href="http: //www.google.com">Jجg+ج</a><br‎ /> 
<a href="http: //www.msn.com" target=" blank" >MSN</a> 
E E 
<a href="firstPage.html" target=" self">J ول مثا‎ </a> 


</body> 


SHEL 


الذي يبدو عند استعراضه بمستعرض الويب كمايلي: 


e Favorites | چ‎ € | SQL Injection and Cross-Si... 


© كا - له - ® صفحة اختبار لعناصر الروابط‎ 8 + Pager” 


8 Computer | Protected Mode: Off 


الشكل ٩‏ : صفحة اختبار عنصر الروابط 
لقد قمنا بتزويد صفحتنا بمجموعة من عناصر الروابط التي تشير إلى بعض المواقع الشهيرة و قد 
تعمدت في الرابط الأخير ذكر اسم ملف المثال الأول الذي قمنا بإنشائه معاً في بداية هذا الفصل و 
ذلك لتوضيح أن الروابط يمكن أن تكون مطلقة 25501016 (كالثلاثة الأولى) أو نسبية aveاRe‏ 
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(كالرابط الأخير) و يقصد بالنسبية أن الرابط المذكور يكون عبارة عن مسار 2315 ملف الصفحة 
الهدف بالنسبة للصفحة الحالية و في حالتنا فقد كانت الصفحة الهدف 115]1306.171101؟ في نفس 
مجلد الصفحة الحالية “. 


عند النقر على أحد هذه الروابط سيتم الانتقال إلى الرابط ا*الا المذكور في الواصفة 066 المرافقة 
لعنصر الرابط الذي تم النقر عليه» من الجدير بالذكر أنَّنا قمنا بتزويد بعض الروابط بالواصفة 
8 و التي تحدد مكان عرض الصفحة الهدف في المستعرض بمعنى أتها تجيب على الأسئلة 
التالية: 


هل سيتم عرض الصفحة الهدف في نفس الصفحة الحالية؟ (في هذه الحالة فإن قيمة الواصفة هي 
القيمة ا ©5_)» هل سيتم عرض الصفحة الهدف في نافذة مستعرض جديدة؟ ( في هذه الحالة فإن 
قيمة الواصفة 301اط_)» هل سيتم عرض الصفحة الهدف في إطار محدد؟ (في هذه الحالة فإن 
قيمة الواصفة هي اسم الإطار و سيتم تناول الإطارات بشكل مفصّل لاحقاً). 


آخر ما يجب ذكره عن الروابط حالياً أنه يمكن للرابط أن يشير إلى أي مورد 1865010166 متوفر 
على الويب و ليس فقط الصفحاتء كما يمكن أن يشير الرابط إلى بريد إلكتروني |(دالا-ا و ذلك 
بأن نضع القيمة :7731140 قبل البريد الإلكتروني الذي نريد أن نضع رابطاً له» انظر المثال التالي: 
EM‏ 
<head>‏ 
CE E LEZ‏ 


رو ابط خاصة 


> 051 ENS 


' يمكنك تعلم المزيد عن المسارات ۴8۸5 من خلال زيارة الموقع: 
http://msdn.microsoft.com/en-us /library/aa365247(VS.85).asPX‏ 


تحميل المزيد من الكتب : 


</head> 
<body> 


انقر هنا <a href="http: //www.somesite.com/files/f1ile1.zip'">‏ 
> وال اللمتاكك 


OE f2 
<a href - "2221116 : 32_55ط طع201‎ 420113211 .con">qyilwl ر</a>‎ 


</body> 


</html> 


ما سيحدث عند النقر على الرابط الأول هو ظهور مربّع تحميل الملف وهاه 118 ©5317 و ما 
سيحدث عند النقر على الملف الثاني هو ظهور برنامج مدير البريد الإلكتروني (مثل ok٥اOu‏ 
(Express‏ في وضع إرسال رسالة جديدة إلى البريد الإلكتروني المذكور ذ في الرابط. 


عناصر الصور 11036065 


فر ا اعتصيرا خاضما العوضيع 'الصنور “كتميق "الصتفحة: .هذا" .اتشر حو "اله 
</109> (اختصاراً ل ©11739) الذي يقوم بعرض الصورة ضمن الصفحة اعتماداً على مسارها 
الذي يمرر للعنصر عبر الواصفة 5/6 (اختصاراً ل ©5010106)» و كما هو الحال بالنسبة للعنصر 
الخاص </07> فإنّ العنصر </17579> لا يمتلك أي وسم نهاية و لذلك فإِنَ شكله العام في الغالب 
يكون </ "0315"-56 1500>. لنشاهد المثال التالي: 


د IAEA‏ 
256361 
<title>‏ 
صفحة لعرض عناصر الصور 


SAE NES 


</head> 
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<body> 
<img src="myPic. jpg" /> 


</ "الصورة الثانية"-غ216 ا ل IMS SEC‏ 


<img  ةدعوح الصورة الثالثة "-2 21 "ومز. ع 1 مجم"‎ " width="100pxX" 
height="50px" /< 


5 "صورتي دات المسار الللشاطك 2-0 د "مسار خاطے سمس ا 
</body>‏ 


MENE 


2 صفحة لعرض عناصر الصور‎ - Windows Internet Explorer 
3 e C:\Documents and Settings{Mukhtar\Desktop1 , html 


>2 و 
kh + :Y Page + Tools >‏ | > رك" صفحة لعرض عناصر الصور © عه جل 


1 
| 
' 
ا 


عورد د ابتار ی لعا : 


my Computer‏ لوا 
الشكل ٠١‏ : صفحة اختبار لعنصر الصور 
كما تلاحظ فقد قام عنصر عرض الصور بعرض الصور ذات المسارات المذكورة في كل وسم 
</17790>؛ و من واصفات هذا العنصر الواصفة 311 التي تسند إليها قيمة نصيّة يتم عرضها في 
حال تعذر الوصول إلى الصورة المذكورة في الواصفة 5۲٥‏ و هذه الحالة حدثت معنا في الصورة 
الرابعة و التي زودناها بمسار خاطئ عن قصد لعرض هذه الحالة» كما يمكن عرض الصورة 


بمقاس محدد و ذلك عبر تزويد العنصر |٣9‏ بواصفتي الارتفاع 1619171 و العرض 1011/لا و التي 
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تسند إليهما قيم رقميّة تحدد عرض و ارتفاع الصورة المعروضة بالبكسل(هذا ما تعنيه ×0 في القيم 
المسندة لهاتين الواصفتين). 

ملحوظة: على فرض أن صفحتنا تحتوي © صور فإنّ عرض الصفحة بشكل تام و صحيح سيحتاج لتحميل 5 
ملفات هي ملف الصفحة و ملفات الصور الخمسة و هذا ما قد يسبب حملا زائداً على موقعك مستقبلاً في حال 


الإفراط في استخدام الصور. 


الصور بدلاً من نصوص الروابط 


من الشائع في مواقع الويب أن يتم استبدال نصوص محتوى عناصر الروابط <ه> بالصور و ذلك 
لتجميل محتوى الموقع بحيث يتم الانتقال للصفحة الهدف للرابط عند النقر على الصورة بدلاً من 


مثالاً بسيطاً لذلك: 
SEM‏ 
21586612 
<title>‏ 
عرض صورة كمحتوى لرابط 
LES‏ و تع > 
</head>‏ 
<body>‏ 
a Met > Ma EO MOKA 356156 Eman EO >‏ 
</ "راسلني"-218 <img src="myPic. jpg"‏ 
</a>‏ 
</body>‏ 
</html>‏ 
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- 
Windows Internet Explorer‏ - عرض صورة كمحتوى لرابط @ 


Google‏ |8 || ث2 | 4 |- CX Users\ Mukhtar‏ ھا ررح ت 
SQL Injection and Cross-Si...‏ | 86 چ Favorites‏ جد 


aE ax A - به‎ 13 © - Page> 


Computer | Protected Mode: Off‏ ار 


الشكل ١١‏ : استخدام الصور بدلاً عن النصوص كمحتوى للروابط 
الخرائط الصوريّة 5م13/ ©213606! 


الخرائط الصوريّة تعني جعل أجزاء محدّدة من صورة ما روابطاًء و يتم هذا على ثلاث مراحل؛ 
الأولى هي أن يتم وضع الصورة في الصفحة بشكل تقليدي عن طريق الوسم </1779>»: أما الثانية 
فهي إنشاء عنصر الخريطة <1730> مع إسناد قيمة الواصفة ©1317 الخاصة به كاسم للخريطة و 
من ثم إنشاء مجموعة من عناصر <3068> بإحداثيات المناطق التي ستتحول إلى روابط في 
الصورة» و المرحلة الثالثة تتم بربط عنصر الخريطة و عنصر الصورة و ذلك بإسناد اسم الخريطة 
إلى الواصفة م5۴۳2د الخاصة بعنصر الصورة» لنشاهد المثال التالي: 

<html> 

<body> 

<2/>انقر على أحد الكواكب لعرض معلومات عنه<م> 


<img src="planets.gif" width="145" height="126" 
الكو اكب"-218‎ " usemap="#pم1lanetmap"‎ /< 


<map name="planetmap"> 


<area shape="rect" coords="0,0,82,126" "الشمس"-+231‎ 
href="sun.htm" /> 


<area shape="circle" coords="90,58,3" "المريخ"-218‎ 
href="mercur.htm" /> 


03 


<area shape="circle" coords="124,58,8" alt=" "الزهرة‎ 
href="venus.htm" /> 
</map> 
</body> 


GARE S 


يبدو المثال التالى فى المستعرض كمايلى: 

CA\Users\Mukhta\Desktop\firstPage.html - Windows Internet E...‏ حي 
22 ++ ا CX Users\Mukhtaı‏ 1 35 > © 
o Favorites‏ 


4 CA Users\Mukhtar\Deskto... 


| 3 Google 


SQL Injection and Cross-Si...‏ هم چو 


a - به‎ - 


اتقر على أحد الكواكب لعرض معلومات عته 


mm > عونم‎ > 


الشكل ٠١‏ : مثال على صنع خريطة صورية 


كما تلاحظ فقد تمت إضافة الصورة بشكل طبيعي أولآء ثمَّ بدأنا بإنشاء الخريطة و أعيطناها اسماً 


mag Mame plane EMA > 


WWW. ع ل‎ 2 2122-5 3 211303 . com 


تحميل المزيد من الكتب : 


بعد ذلك قمنا بإنشاء منطقة لكل كوكب من الكواكب عبر الوسم 3063 و الذي له واصفتان الأولى 
©0986 لتحديد شكل المنطقة (مستطيلةء دائرية .. إلخ)» أمّا الثانية فهي واصفة الإحداثيات 
5 حيث تم تمرير أربعة إحداثيات في حالة المستطيل لتحديد أبعاد المستطيل يمثل 
الإحداثيان الأول و الثاني الركن الأيسر العلوي من المستطيل بينما يمثل الإحداثيان الثالث و الرابع 
الركن الأيمن السفلي من المستطيل و هذا كاف لتحديده» و بالطبع تم هذا على اعتبار أن مركز 
الجملة الديكارتيّة للصورة هو الركن الأيسر 
العلوي من الصورةء» و بهذا فإن النقطة 
)٠.٠(‏ و النقطة (82,126) تحددان 
منطقة كوكب الشمس بالمستطيل المرسوم 
بينهماء أمّا في حالة المنطقة الدائرية فيتم 


تمرير ثلاثة إحداثيات يعبر الأول و الثاني 


عن نقطة مركز الدائرة و يعبر الثالث عن 


نصف قطرها. الشكل ٠١‏ : شكل تخيلي لتوضيح المبدأ الهندسي في رسم المناطق 
و في النهاية قمنا بتمرير اسم الخريطة إلى الواصفة 503۴ل الخاصة بالصورة. 


ملحوظة: يتم تمرير اسم الخريطة إلى الواصفة 5۵۳2لا مسبوقاً بالرمز # 


Internal Linking الروابط الداخليّة‎ 


أحياناً يكون المحتوى الموجود ضمن صفحة معيّنة كبيراً إلى حذدّ ما و في حالة مثل هذه يصبح 
الأنتقال إلى فقرة محندة ضمن الضفحة حملية ترق ينض الجمدو الرقت: تور لغة 10 


آليّة للانتقال إلى جزء محدد من الصفحة مباشرة عبر ما يعرف بالروابط الداخلية Internal Links‏ 


لت 
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و التي يتم تحقيقها عبر استخدام وسم الرابط <3> و تمرير معرّف العنصر المراد الانتقال إليه 
كقيمة للواصفة "۲٠١۴‏ بالشكل التالي: 


اسك الا CE 5 DE‏ 201 كلظ ع عصط el‏ 
حيث أنّ 10 يمثل معرف العنصر المراد الانتقال إليه ضمن الصفحة و المثال التالي يوضّح هذه 
الفكرة: 
EM‏ 
<head>‏ 
<title>‏ 
هن على اترو ايبط اله اا 
EE Oz‏ 
</head>‏ 
<body>‏ 
<ھ/< إلى الفقرة انرlايبيةPara4">ö#"=href <a‏ 
SE IE‏ 1ك 1ه 
A N GCE TSS ES O‏ د 
E >11‏ لشن EE‏ 111 
> ا مجترى | لفت الان 
001 > | رة الا 1ا12 
مم > فشك وى القترة | لكر اشكرش: مه 
<1ط/>الفقرة الرابعة<"22224"-13 21> 
ملك 5ش 2 | الشركة الك ا <> 


</body> 


AES ENE; 


<۳ 
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القوائم 1515| 
توفر لغة 111/1! نوعين من عناصر القوائم: 


-١‏ القوائم غير المرتبة أكأا 001061©0لا عبر الوسم <الا>. 


- القوائم المرتبة أا 0706160 عبر الوسم <01>. 


بعد أن نقوم بتحديد نوع القائمة التي نرغب بإنشائها نضيف محتواها كمجموعة من عناصر <1> و 


التي تعني 1617| 151اء لنشاهد المثال التالي و الذي يعرض كيفيّة إنشاء قائمة غير مرتبة بسيطة: 


ليع مك 
<head>‏ 
ست ال علي لكك كك عبر مرکا اع 
</head>‏ 
د AES E‏ 657 59> 


<2/ >سنتعلم 0 عل ١‏ الاد 


>111< 
<li>HTML</1li> 
<li>HTML5</1i> 
<li>XHTML</1i> 
<l1li>CSS</1i> 
>11<0553>/13< 

</ul> 

</body> 
</html> 


3 
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© مثال على قائمة غير مرتبة‎ - Windows 1606+ Explorer f 


©8 ©[ C\Users\ Mukhtar v | ++ | X || $| Google م‎ - 


hk Favorites چ‎ © [ SQL Injection and Cross-Si... 


سا - ~~ ا | مثال على قائمة غير مرتبة © 


¥ Computer | Protected Mode: Off 


الشكل ٠١‏ : مثال لقائمة غير مرتبة بسيطة 


بتعيير وسمي البداية و النهاية لعنصر القائمة من <ul>‏ و </ul>‏ إلى <|0> و </ol>‏ ستصبح 
القائمة مرتبة بالشكل التالي: 


kr Favorites | ا‎ 8ً SQL Injection and Cross-Si... 


-عودم + dh‏ 3< > ه | ١‏ مثال على قائمة غير مرتبة © | 


Computer | Protected Mode: Off‏ تر 


الشكل ٠١‏ : مثال على قائمة مرتبة بسيطة 


fo 
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بالطبع و كما ذكرت منذ بداية هذا الفصل فإن أي عنصر من عناصر ا۳1۷ يمكن أن يحوي 
بين وسمي بدايته و نهايته أية مجموعة أخرى من العناصر و هذا يعني أننا نستطيع إنشاء قائمة 
تحوي قوائم فرعيّة كعناصر لهاء و المثال التالي يوصح هذه الفكرة: 

GIME 

<head> 

E5‏ م ال علے فانم مع و عاد 
</head>‏ 
SBOE CEES E‏ 


<2/>سنتعلم و متا الک ادد 


دلرو 
IS‏ 
HTML‏ 
<ul>‏ 
<ذ1/>الرو ابط<ذا1> 
<13/>الصور<11> 
القوائم<11> 
<111> 
<11/>المرتبة<11> 
<11/>غير المرتبة<11> 
</ul>‏ 
</1i<‏ 
</ul>‏ 
ER‏ 


SS HME CS >> 1! 


كع 
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111112131 


LAS‏ 05د 


> 55 دا 


يبدو المثال أعلاه في المستعرض كمايلي: 


:1 


HTML 


qf Favorites | جو‎ @] SQL Injection and Cross-Si... @] 1000 Popular jQuery Plugi... 


® و ع‎ vl Hm + Pagev Safety v Tools * © - 24 


سنتعلم في هذا الكتاب 


٥‏ الروابط 
ه الصور 
ه القوا ائم 


HTML 5 .2 
XHTML .3 
.4 

9553 5 
> @125% v 


CSS 


» المرتبة 
» غير المرتبة 


> لات‎ 
BOA 


GAELS 


@ مثال على قائمة معقدة‎ - Windows Internet Explorer 


¥ Computer | Protected Mode: Off 


الشكل ١5‏ : مثال على قائمة معقدة 


مثال على قائمة معقدة @ 


> -_ِ © C\Users\Mukhtar\Deskto| ال | 2 | 4 ا‎ Google 


ے4 


آخر ما يجب ذكره عن القوائم أنه يمكن استخدام الواصفة 106 لتغيير شكل القائمة ففي حالة 


القوائم غير المرتبة يمكن إسناد إحدى القيم التالية إليها: 501/306 أو 0156 أو 1616© لوضع رمز 
المربع أو القرص أو الدائرة أمام كل عنصر على الترتيب» و في حالة القائمة المرتبة يمكن إسناد 


تحميل المزيد من الكتب 


WWW . 


إحدى القيم ١‏ أو 8 أو 3 أو | أو أ¡ إلى الواصفة هملأ لتحويل الترقيم إلى ترقيم بأرقام عربيةء ترقيم 
بأحرف إنجليزية كبيرة» ترقيم بأحرف إنجليزية صغيرة» ترقيم بأرقام لاتينية كبيرة» ترقيم بأرقام لاتينية 
ووخة تع کان ن الاک ب ف ا اك الم هات يق او افك ا الرس 2012 ار 
اة ر ا 813 لر امف و اانه 083 لكر فر اطا الاه امان 


التالي: 
»> 
<head>‏ 
NE SE SL EEE 2 E NE‏ 
</head>‏ 
لح E‏ عط كه BOA‏ 
<01> 
<dt>HTML</dt>‏ 
<dd>Hyper Text Markup Language</dd>‏ 
<dt>XHTML</dt>‏ 
<dd>eXtensible Hyper Text Markup Language</dd>‏ 
<dt>CSS</dt>‏ 
<dd>Cascading Style Sheet</dd>‏ 
</d1>‏ 
BOS‏ 
MELE‏ 


تبدو قائمة المصطلحات في المستعرض كمايلي: 


0 


5 


تحميل المزيد من الكتب : www.learn-barmaga.com‏ 


8 مثال على قائعة مصطلحات‎ - Windows Internet امكلاصح.....نب ميو »داج‎ 
65] C\Users\ Mukhtar 3 2 | 22 ١ J| Google 


qf Favorites Şê @] SQL Injection and Cross-Si... @] 1000 Popular jQuery Plugi... 
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HTML 

Hyper Text Markup Language 
XHTML 

eXtensible Hyper Text Markup Language 
CSS 

Cascading Style Sheet 


2 


> 12596 © ج Computer | Protected Mode: Off eq‏ تر 


الشكل ١7‏ : هكذا تبدو قائمة المصطلحات في المستعرض 
الجداول 132165 


توفر لغة ا1 آلية لإنشاء الجداول عبر العنصر <#اطها> و يتم ذلك عبر إنشاء العنصر 
<3016]> أُوْلِاَ و تمرير واصفتي العرض 2/1017 و عرض الحدود 00۲۵6۲ بالبكسل» و من ثمَّ 
إنشاء محتويات الجدول عبر عنصر أسطر الجدول 701/5 ©1901 و الذي يتم تحقيقه باستخدام 
الوسم </1>». ثمَّ يتم ذكر محتويات خلايا 0313 ©1301 كل سطر من أسطر الجدول على حدى و 
ذلك عبر الوسم <4> و لتسهيل حفظ الوسوم يمكن تمثيلها بشكل مرئي كمايلي: 


<td></td> <td></td> <td></td> 


<td></td> <td></td> <td></td> 


<td></td> <td></td> <td></td> 


الشكل ١١‏ : شكل تخيلي لتوضيح الوسوم المستعلمة لإنشاء الجدول 


و لتطبيق هذا المفهوم عملياً بغية توضيحه أكثر دعنا نشاهد الشيفرة التالية التي تقوم بإنشاء جدول 


تحميل المزيد من الكتب : com‏ . 222302 2 ط- متت 1 . اوها 


بسیط: 


>15 للع‎ 
MEAG 
E EEE OES CE EE EE ES 
</head> 
<body dir="rtl"> 
<table border="1" width="50%"> 
<tr> 
<فخ/>اسم الكتاب<80>‎ 
> <0غ2/> السعرحقع‎ 
</tr> 
SEES 
<8غ+/>برمجة الويبي<0>‎ 
> ع0<١ ه‎ ١٠ >/ <لءع‎ 
</tr> 
<tr> 
<ك†/>برمجة الجوال<0غ>‎ 
<td> ١٠ ٠ >/ حلع‎ 
</tr> 
<tr> 
<كغ/>برمجة الألعاب<0غ>‎ 
<td>Yo۰</td> 
</tr> 
<tr> 
<0+/>تعلم الطبخ<60>‎ 


<td>o*</td> 


.ع6 


تحميل المزيد من الكتب : com‏ . 222302 د ط- متت 1 . وده 


</tr> 
</table> 
</body> 
</html> 


يبدو هذا الجدول عند عرضه في مستعرض الويب كمايلي: 


ا Windows !nternet Explorer‏ - مثال على إنشاء جدول بسيط @ 


GEE l2 C\Users\ Mukhtar أ‎ 4 | 2 | J| Google 
$ Favorites | جو‎ @] SQL Injection and Cross-Si.. @] 1000 Popular jQuery Plugi... 


© مثال على إنشاء جدول بسيط‎ ® <O 7i3 و9‎ + Pager safety 


اسم الكتاب 
برمجة الويب 
برمجة الجوال 
برمجة الألعاب 


تعلم الطبخ 


Computer | Protected Mode: Off eq > © 12596 >‏ تر 


الشكل ١5‏ : مثال على إنشاء جدول بسيط 

كما رأينا فقد قمنا أولاً بإنشاء عنصر الجدول <12018> بعرض 1/1019 965٠‏ من العرض الكلي 
للصفحة (حاول تغيير حجم نافذة المستعرض لتلاحظ أن ذلك يبقى صحيحاً!)»و بعرض حدود 
١ 0067‏ بكسلء ثمَّ قمنا بإنشاء سطر جديد باستخدام الوسمين </]/><12>.: يحوي هذا السطر 
على خليتين <10<>/10> تحوي الأولى القيمة "اسم الكتاب" و تحوي الثانية القيمة 'السعر" ثمَّ قمنا 
بتكرار نفس الأسلوب مع الأسطر الأخرى التي تحوي بيانات الكتب» أظن أن الموضوع أصبح 
ايها الا 

ملحوظة: يمكن إعطاء قيمة عرض الجدول بالبكسل أيضاً أو بأي واحدة قياس من الواحدات المدعومة في لغة 


111/1 و التي سيتم ذكرها لاحقاً. 


°1 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


يقسم كل جدول من جداول 111/1 إلى أربع مناطق: 


-١‏ منطقة رأس الجدول ١1830‏ ©13016: يُنشأ هذا القسم باستخدام الوسمين <5680]> و 
<0630]/> و يحوي في الغالب على عنصر سطر <۲<>/۲)> يحوي بين وسمي بدايته و 
نهايته عناوين أعمدة الجدول في خلايا من النوع >١<‏ بدلاً من <لا>ء حيث تم 
الاصطلاح أن <10> تعني خلية بيانات 0318 ©1901 في حين أن >١<‏ تعني خلية 
عنوان .table heading‏ 

-١‏ منطقة جسم الجدول ر١80‏ ©1301: يُنشأ هذا القسم باستخدام الوسمين <رلهطا> و 
</ا1500/> و يحوي على سطور البيانات و التي تنشأ باستخدام <> و بما أن خلاياها 
تحوي معلومات فإن الخلايا تنشأ باستخدام الوسوم <10]>. 

"- منطقة ذيل الجدول 10014 ©1301: يُنشأ هذا القسم باستخدام الوسمين <1006> و 
<11001/> و يحوي في الغالب على عنصر سطر <1<>/1> يحوي بين وسمي بدايته و 
نهايته ملخصات عن أعمدة الجدول في خلايا من النوع <58]>. 

5- عنوان الجدول 3011007): يضاف عنوان الجدول بكتابة نص العنوان بين وسمي 


<1100م03> و <100ام02/>: يوضّح الشكل التالي مناطق الجدول المختلفة: 


فاتورة شراء الكتب ج عنوان الجدول 


اسم الكتاب السعر ج رأس الجدول 


الشكل ٠‏ : رسم توضيحي لأقسام الجدول في ا1۲۸۷ 


oY 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


لتحقيق الجدول المذكور في صفحتنا سنكتب شيفرة ا1۲1 التالية: 


IA EL 
<head> 
داع 11د‎ E EE 005 E EE EE EE 
</head> 
TOOChZ CO = EE LAS 


<table border="1" width="50%"> 


>caption/<فاتورةö‏ شراء اiãÉlب>caption<‏ 


<thead> 
<tr> 
>tط<باتكلا <طغعغ/>اسم‎ 
>tط<رعسلا <طغع/>‎ 
</tr> 
</ thead> 
<tbody> 
E 
E د‎ O 
CEC SO<SAEOS 
€ EES 
GEEZ 


ادع ١‏ > رو ال ال 0ع 


or 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


<td>200</td> 
E 
IEE 
<0+/>برمجة الألعاب<20>‎ 
<td>350</td> 
CIEE 
EI 
>اtd<خيطلا <0+/>تعلم‎ 
ECL SOS AEC 
EES 
</tbody> 
<tfoot> 
<tr> 
<حطغ/>المجموع<ط>‎ 
<th>750</th> 
</tr> 
</tfoot> 
</table> 
</body> 
</html> 


o 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


| اڪ - Explorer‏ أعممع:10 Windows‏ - مثال على إنشاء جدول مثالي @ 
١ | Google‏ 52 1 2 ا C\Users\ Mukhtar‏ 201 


4 Favorites کک‎ 8ً SQL Injection and Cross-Si... 8ً 1000 Popular jQuery Plugi... 


<< 5 
Safety + Tools‏ +عودم + 999 كا + <O‏ ® مثال على إنشاء جدول مثالي © 


فاتورة شراء الكتب 
اسم الكتاب 
برمجة الويب 
برمجة الجوال 


برمجة الألعاب 


¥ Computer | Protected Mode: Off e - © 12596 > 


الشكل ١؟‏ : مثال لإنشاء جدول ا1۳۷ مثالي 


كما تلاحظ فإنّ العنوان يظهر أعلى الجدولء كما أن الأسطر الموجودة في منطقتي الرأس و الذيل 
تظهر بخط عريض 5010. 


الجداول غير البسيطة 


في الحقيقة ما تم استعراضه في الفقرة الماضية كان جميلاً و بسيطاً أيضاً فبالنسبة لحالة مثل حالة 
فاتورة الشراء فإن جدولاً بعمودين و بمجموعة من الأسطر أمر بسيط و لكن ماذا عن الحالات 
الأعقد؟ء ماذا عن الحالات التي لا تكون فيها الخلايا متساوية الأحجام؟, و لا الأسطر متساوية 
عدد الخلايا؟» تجيب ا11۷ على هذه التساؤلات المحقّة عبر تقديم الواصفتين 1011/5081 و 


.colspan 


تستخدم الواصفتان ۲0١۷5٥2۸‏ و 6015031 مع وسم بداية الخلية <10> أو >١<‏ و تسند إليهما 
قيمة رقمية صحيحة ١(‏ أو ۲ أو ۳ .. إلخ) تغير من حجم الخلية فتجعلها بحجم خليتين أو ثلاث 


أو أربع .. إلخ» حيث أن 501/5031 تتحكم بعرض الخلية» أما 001508317 فتتحكم بارتفاع الخلية. 


لنشاهد الشيفرة الثالية على سبيل المثال: 


تحميل المزيد من الكتب : com‏ . 222302 2 ط- متت 1 . اوها 


<html> 
MEAG 
1د‎ 1 EE 25 E CEE 5ك‎ EE 
</head> 
DOSY CAE E 
<table border="1" width="100%"> 
<tbody> 
EE > 
ام اکا‎ E 
EO EE SM OUE E y 6ك | | 5ك‎ O 
<td rowspan="3'"> 
<img src="jQueryl20.png"> 
€ EOE 
< ع‎ 
SEE 
ECON r SAE 
<0غ+/>مختار سيد صالح<0>‎ 
> «قرج أ‎ 
SEE 
Ey ANY KES 
<td>2010</td> 
AEE 
EZ 


<td colspan="3"> 


OWE ESS عدن‎ E ESE E ESE 


كه 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


</td> 
Gf EES 
</tbody> 
</table> 
€ OCS 
</html> 


تبدو الشيفرة السابقة عند عرضها في المستعرض كمايلي: 


7 حك 
rn‏ د SEE E‏ 


1 و‎ Favorites چ‎ 8ُ SQL Injection and Cross-Si... ê 1000 Popular jQuery Plugi... منظمة كناب بلا حدود الشرق الاوسط‎ 


> - 
A - EO + ]2 9 + Pager Safety” Tools ©©+ *‏ مثال على إنشاء جدول غير بسيط © 


. 


تعلم رعمںز في 120 دقيقة 


في 120 دقيقة 


مختارسيدصالح 


سنه الإصدار 


يقدم هذا الكتاب معلومات عن مكتبة jQuery‏ بشكل مبسط و واضح 16 إلخ. 


> 125966 © > ي6 Computer | Protected Mode: Off‏ ¥ 
الشكل ۲۲ : مثال على إنشاء جدول غير بسيط باستخدام الواصفتين 1011/531١‏ و 015021© 
كما ترى فإنّ الجدول يتكون من أربعة سطور يحوي السطر الأوّل على ثلاث خلايا واحدة منها 
بارتفاع يعادل ارتفاع ثلاثة أسطر مجتمعة (هذا ما تعنيه 3"-701/50310")» أمّا السطر الأخير من 


الجدول فيحوي على خلية واحدة بعرض أعمدة الجدول الثلاثة مجتمعة (و هذا ما تعنيه 


تحميل المزيد من الكتب : com‏ . 222302 2 ط- متت 1 . اوها 


5030-3" أظن أن استخدام الواصفتين 1010/5031 و 6015831 أصبح واضحاً الآن» و 
بالنسبة لأصدقائي الذين لم تتضح الصورة بالنسبة لهم فأعتذر منهم و أنصحهم أن يقوموا بتغيير 
القيم المذكورة في الواصفتين 011/5031 و 0015031 في المثال السابق و يلاحظوا الفرق الحاصل 
في أحجام الخلايا فهذا يساعد كثيراً في تشكيل تصوّر أفضل لديهم كما أظن. 


ملحوظة: ليطمئن قلبي أحب أن أذكرك أنه بإمكانك وضع أي من عناصر ا11 كمحتوى في خلايا الجدول. 


Forms النماذج‎ 


تستخدم النماذج 1١017175‏ في لغة ا/111] لاستقبال المدخلات 10801015 من المستخدم بغية عرضها 
أو تخزينها أو القيام بعمليات معالجة معينة عليهاء يتم إنشاء النماذج باستخدام الوسمين <010]> 
و <1017/> الذان سيحويان بينهما مجموعة من عناصر الإدخال <1لام10> مثل مربعات 
النصوص (٥×5‏ ×6 و عناصر الاختيار 50765 8661© و الأزرار 5 و القوائم 


المنسدلة 15]15! أامء.. إلخ. 


يتم تزويد وسم بداية عنصر النموذج <10177> بواصفتين أساسيتين الأولى هي الواصفة 360100 و 
التي تحدد اسم الملف البرمجي الذي سيقوم بمعالجة البيانات المدخلة في النموذج و يكون الملف 
البرمجي مكتوباً بإحدى لغات البرمجة من طرف السيرفر 5106 S6۷6۲‏ مثل لاط أو 
1عالا.252 أو J5۶‏ أو .. إلخ (و البرمجة من طرف السيرفر موضوع خارج نطاق هذا الكتاب)» 
ما الواصفة الثانية فهي الواصفة 70615700 و التي تحدد طريقة إرسال البيانات إلى الملف البرمجي 
المذكور سابقاً بإحدى طريقتين: 

١‏ - الطريقة الأولى هي الطريقة 964 حيث يتم إرسال البيانات في شريط العنوان في 


المستعرض بعد اسم الملف البرمجي بشكل أزواج مفتاح/قيمة» انظر للرابط التالي على 
سبيل المثال: 


o۸ 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


http://www.site.com /file.php?name=Mukhtar&age=238&job=ComputerEngin 


eer 
http://www .site.com/file.0ص كما تلاحظ فإن الملف البرمجي في هذه الحالة هو‎ 
أا القيم المرسلة فهي:‎ 
job = ComputerEngineer و‎ age = 23 و‎ name = Mukhtar 
؟ - الطريقة الثانية هي الطريقة 0051 حيث يتم إرسال البيانات بشكل غير ظاهر في‎ 
.)111 152 شريط العنوان (في الحقيقة يتم إرسالها مع ترويسة طلب‎ 

بما أننا -في هذا الكتاب- سنهتم بكيفية إنشاء النماذج فقط و لن نناقش كيفية معالجة الطلبات 

فبإمكانك الآن تجاهل ما تم ذكره عن الواصفة 77611700 و التركيز على كيفية بناء النماذج. 

نهايته باستخدام الوسم <01ا100> و طبعاً سيتم تزويد كل عنصر إدخال باسم فريد يُستد كقيمة 


الال يوطت القيم الك وما هة كل متا 


القيمة ما تمثله 

button‏ زر أوامر 

checkbox‏ عنصر اختيار متعدد 

file‏ مربع لاختيار ملف بغية رفعه إلى الموقع 

hidden‏ عنصر إدخال مخفي 

password‏ عنصر إدخال كلمة المرور 

radio‏ عنصر اختيار فردي 

reset‏ زر لإعادة ضبط القيم الافتراضية لعناصر 
ا 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


الإدخال كاملة في النموذج 
submit‏ زر موافق (إرسال الطلب) 


text‏ مربع إدخال نص 
الجدول ۳ : القيم المختلفة للواصفة ١٠لا‏ الخاصة بعنصر <أام١أ>‏ 


لا تقلق إِنْ بدت لك المعلومات كثيرة و معقدة و تابع معي الشيفرة التالية: 
<html>‏ 
MEAG‏ 
<title>‏ 
مال على اها موي اط 
EEE‏ 
</head>‏ 
للع عد ع GOOSEN Cu‏ 
<form method="get" action="file.php">‏ 
الاسم 
<input type="text" name="nameText" id="nameText" /<‏ 
<br/>‏ 
كلمة المرور 
<input type="password" name="pass" id="pass" />‏ 
<br/>‏ 


<input type="submit" name="okButton" id="okButton" 
va1uںە=" "مو افق‎ /< 


</ form> 
</body> 


</html> 


5 


تحميل المزيد من الكتب : learn-barmaga. com‏ . وده 


و التي تبدو عند عرضها في مستعرض الويب و بعد إدخال بعض البيانات كمايلي: 


@ مثال على إنشاء نموذج بسيط‎ - Windows Internet Explorer 


@ ع‎ | C\Users\ Mukhtar 3 “+ | X || 2) Google 


$ Favorites چ‎ €) SQL Injection and Cross-Si... 
© -عودم - ©8 تخا - ([ع - ® مثال على إنشاء نموذج بسيط‎ 
الاسم : مختار سيد صالح‎ 


كلمة المرور : occ‏ 


Computer | Protected Mode: Off eg > AI >‏ ار 


الشكل ۲۳ : مثال على إنشاء نموذج بسيط 
الإدخال على سبيل التجربة؛ انظر للشيفرة التالية: 
<html>‏ 

heads 

EE E EE E 1ك لكك كش‎ E ES 
</head> 
SOY O E TE 

<form method="get" action="file.php"> 


SD | لك‎ EUE EBC EEE MOSM > EEE ll 
id="nameText" /> 


BE 


Ca SWOIJ Mame Dac‏ 210085 تا ناترة ة > ols‏ المرورة 
id="pass" />‏ 


BE 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


Mame PCL‏ 22201-17262116 ااصەرة االسحشتكد: 


تلان اده 6 اد 
BES‏ 


<input type="reset" name="resBtn" id="resBtn" 
value=" "استعاد ة‎ /< 


<input type="submit" name="okButton" id="okButton" 


</ "موافق"-©72111 
SVE OEM‏ 
OCS‏ € 


</html> 


تبدو الشيفرة السابقة في مستعرض الويب كمايلي: 


Windows ]nternet Explorer‏ - مثال على إنشاء نموذج أعقد قليلاٌ 
١ Î Google‏ 
mm >‏ 


EF | @] CAUsers\Mukhtaı | ا“‎ < 


4 Favorites 3 © SQL Injection and Cross-Si... 8 1000 Popular jQuery Plugi... 


@ +عودم + 899 خا - [5 - ® مثال على إنشاء نموذج أعقد قليلاً‎ safety 


الاسم : 

كلمة المرور : 

الصورة الشخصية : | Browse...‏ 
| استعادة | | مواقق 


Computer | Protected Mode: Off 0 -| 94 12596 >‏ قر 


الشكل 4؟ : إنشاء نموذج أعقد بقليل 


مهلاً! .. و لكن ماذا عن عناصر الاختيار radio‏ و checkbox‏ ؟ 


حسناًء في الواقع يتم استعمال هذه العناصر في النماذج بغية تمكين المستخدم من الإجابة على 
سؤال محدد و ذلك باختيار جواب واحد فقط من عدة إجابات محتملة (في حالة عنصر 8010)) أو 


الإجابة على سؤال محدد باختيار أكثر من جواب (في حالة عنصر “«0766150) و يتم استخدام 


تحميل المزيد من الكتب : com‏ . 222302 2 ط- متت 1 . اوها 


هذه العنا بنفس الطريقة السابقة ظة إعطاء جميع العنا التى تمثل إجابة أن 
صر مع جميع العتاصن. الدى : 
السؤال القيمة ذاتها للواصفة ©5317 و قيماً مختلفة للواصفة همداة۷ء لنشاهد المثال التالي: 


E‏ ال كم 


تحميل المزيد من الكتب : 


<form method="post" action="file.php"> 


<input type="checkbox" name="wrKnow" value="nPaper" /> 


<input type="checkbox" name="wrKnow" value="wbSite" /> 


<input type="checkbox" name="wrKnow" value="frnd" /> 


<input type="checkbox" name="wrKnow" value="srEng" /> 


<input type="radio" name="rate" value="good" /> 


<input type="radio" name="rate" value="mid" /> 


<input type="radio" name="rate" value="bad" /> 


<html> 
MEAG 
El Ele AOL 5 EEG O< | E | 
</head> 


SOY 1ك‎ EE 


dO‏ اسن کل کن مو ا و 


جريدة 


موقع الكختروتي 


صديق 


درك كحت 


E EE ل 2 2مك‎ 


جيك 


متوسط 


للح 


1۳ 


WWW. ع ل‎ 3 2122-5 3 211303 . com 


€ FORE 
</body> 


>11 


6 CAUsers\Mukhtar > | ج>‎ | >< 


| ل‎ Favorites چو‎ © | SQL Injection and Cross-Si... 


x >)‏ نا ® ...مثال على checkboX|‏ و radio‏ 8 1 
من أين علمت عن موقعنا ؟ 
| جريدة [5] موقع إلكتروني 79 صديق [#] محرك بحث 15 
ما تقييمك لموقعنا؟ 


جيد ) متوسط @ سيء ١‏ 


Computer | Protected Mode: Off Cg > 84 125956 vw‏ تر 


الشكل 5" : مثال على استخدام checkbox‏ و radio‏ 


هناك طريقة أخرى لتحقيق شيء مشابه لعنصر ۲۵۵1٥‏ من حيث الهدف و لكنه يستخدم في حال 
وجود بدائل كثيرة (أجوبة كثيرة محتملة للسؤال) و هو عنصر القائمة المنسدلة و يتم تحقيقه عبر 
الوسم <561601> أمّا عناصر القائمة فيتم تحقيقها من خلال الوسم <001100> و يتم تحديد أحد 
هذه العناصر كخيار افتراضي عن طريق تمرير الواصفة "56|166160"-56160160 في وسم بدايته» 
لنشاهد المثال التالي: 

GEM 

<head> 
E1 E1821 ال علے الكش |ھ‎ 13 


</head> 


BDO CES EE ل‎ 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


<form method="post" action="file.php"> 
EE | OEE | 
<select name="nationality'"> 
<option selected="selected"> Ly ر‎ gw</option> 
<option>J!l yalJ|</option> 
<option>jliıJ</option> 
<option>jaط¦bwJi</option>‎ 
<option>jüaرÎl1l</option>‎ 
<option>ڊرزغخnlJاl</option>‎ 
<option>رڇÖئاl‎ jجلJاl</option>‎ 
</select> 
EO 


€ OOS 


>10 


PE Select مثال على استحدا‎ - Windows Internet فتك ام‎ 
o ً8ا‎ CXAUsers\Mukhtar > 


Ti Favorites ع چ‎ SQL Injection and 016055-51. 


خا - ل - ® مثال على استخدام select‏ @ 


من أي البلدان أنت؟ 


Computer | Protected Mode: Off‏ تار 


الشكل ۲٠‏ : مثال على استخدام عنصر ا٥ء‏ 


تحميل المزيد من الكتب : com‏ . 222302 2 ط- متت 1 . اوها 


بقي عنصر إدخال أخير لمناقشته هنا و هو العنصر <16«19/63> و الذي يستخدم لإدخال قيمة 
نصية متعددة الأسطر على عكس العنصر <01ا150> من النوع 16«4 و الذي يستخدم لإدخال قيمة 


E EE 


يمرر للعنصر <16<13063> قيم عددية صحيحة عبر الواصفتين 6015 و ۲٠۷8‏ لتحديد عرضه و 
ارتفاعه»ء انظر الشيفرة التالية: 
<html>‏ 
<head>‏ 
<title>‏ 
مسا حتف اسک اح 22 هع 
ARE 82‏ 
</head>‏ 
ISOC Clie WEE LY‏ 
<form method="post" action="file.php">‏ 


SOS ESS CEES EE OME 


<textarea cols="30" rows="10" name="bio"> 


</textarea> 


CF OEE 


</body> 


> JOEL < 


الذى يبدو عند استعراضه ۀ تعرض الويب كمايلى: 
و الدي يبدو ستعراصة في مسعرص : 


7 


تحميل المزيد من الكتب : 0108© . 2210263 ط-2212 © 1 www.‏ 


e ج‎ @)] CAUsers\Mukhtar > | <+ | <> | 


> > 


س 
SQL Injection and Cross-Si...‏ [ © چو qi Favorites‏ 


N > ]&‏ - وم مثال على استخدام textarea‏ @ 


الشكل ۲۷ : مثال على استخدام العنصر 167130623 
تقسيم عناصر الإدخال إلى مجموعات 


يمكن تقسيم عناصر الإدخال في النماذج الكبيرة إلى أقسام منطقية يوضع كل منها في إطار 
مستقل و هذا ما توفره لغة 11!/1] باستخدام الوسمين <]5161056> و <1610561/> اللذان 
سيحويان بينهما مجموعة عناصر الإدخال و يتم تزويد كل مجموعة بعنوان توضيحي عبر الوسم 
<169600>: كما يمكن منح كل عنصر من عناصر الإدخال عنواناً يدل على ماهيّة المعلومات 
المدخلة فيه عن طريق الوسم <ا1306> بتمرير اسم عنصر الإدخال إلى واصفة 107 الخاصة 
بعنصر العنوان <اعطها>ء دعنا نشاهد المثال التالي: 


د السك ملك 
<head>‏ 
<title>‏ 
کال كك لكشك ام 181e‏ 
قالع 51 / > 


heads 


1۷ 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


<body dir="rtl"> 


<form method="get" action=""> 


<fieldset> 
><1egend><ةيصخشلا‎ تانايبلا>/1egend<‎ 
<label for="nameTXT"> لاسم‎ |</label> 


<input type="text" name="nameTXT" id="nameTXT" 
maxlength="50" /> 


<br/><br/> 
<label for="ageTXT">رngalاl</label>‎ 


<input type="text" name="ageTXT" id="ageTXT" 
maxlength="2" /> 


</ fieldset> 


OE > 


<fieldset> 
ات3 العمل<20ه06و©16>‎ راgم</1egend>‎ 
04 
<input type="checkbox" name="prog" value="cs"/> 


ESE 


<input type="checkbox" name="prog" value="vb"/> 


<input type="checkbox" name="prog" value="fs"/> 


CE TOE 


<input type="checkbox" name="prog" value="cpp"/> 


1۸ 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


</fieldset> 
<fÊieldset> 


<input type="submit" value=" Jlwر|"‎ /> 


</ fieldset> 
SVE OEM 
</body> 
€ f REMLS 


تبدو الشيفرة السابقة كمايلي في مستعرض الويب: 


[١ Gg WT WT e 
@ fieldsetplختwl مثال على‎ - Windows Internet Explorer 


| @| C\Users\Mukhtar v | ++ | X ||| $3] Google 2- 


2< 


$ Favorites 0 8 | SQL Injection and Cross-Si... 


- وه خا - [ - MQM‏ مثال على استخدام†ie|dse؟‏ © 


2> 


البيانات الشخصية 
الاسم 


العم 


مهارات العمل 
O c# Û VB.NET Û F# U CHNET‏ 


¥ Computer | Protected Mode: Off ¢ -| QA125% v 


الشكل ۲۸ : مثال على استخدام ٤۱456ءe|ا؟‏ 


Frames الإطارات‎ 


تسمح لك لغة ا11۷ بتضمين صفحات ويب ضمن صفحات أخرىء و ذلك عبر استخدام 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


. Frames الإطارات‎ 


يتم استعمال الإطارات في الصفحة على مرحلتين» الأولى بإنشاء حاوية الإطارات باستخدام الوسم 
<]1807656> و الذي يحدد بداية عدد الإطارات التي سيتم تضمينهاء و الحجم الذي سيأخذه كل 
إطار من حجم الصفحة الكلي» و يتم تحديد الحجم بالبكسل أو بالنسبة المئوية» أمّا المرحلة الثانية 
فيتم فيها إضافة الإطارات بين وسمي البداية و النهاية للعنصر <13076561> و ذلك باستخدام 
الوسم <1]300©6> و إسناد مسار الصفحة التي سيحويها الإطار للواصفة 5/6 » لنشاهد المثال 
التالي لصفحة ويب تضم إطارين الأول بحجم قدره 967١‏ من حجم الصفحة الكلي و الثاني بالحجم 
الباقي من الصفحة: 

جلا عط 


> 1 23106 5» cols="30%,*"> 
<frame src="page_1.htm" /< 
<frame src="page_2.htm" /> 
> / frameset> 


</html> 


يبدو هذا في مستعرض الويب كمايلي: 


8 © للك لد للضم لاه‎ Deki ES و‎ html - no Internet Explorer 


4~ 
EIS 5 C\Users\ Mukhtar EE + |× Xx 05 Google 


hk Favorites چ‎ 0 | SQL Injection and Cross-Si... 0 1000 Popular JQuery Plugi... 


8 C\Users\Mukhtar\Deskto... 4 7 5 vi mm + عووم‎ + Safety + Tools 7 


Hıi!, I am pagel Hi!, 1 am page2 


v‏ 12596 © + جه Protected Mode: Off‏ ام كك اظ 


ملحوظة: الصفحة التي تستعمل فيها الإطارات لا تحوي على وسم </5001>. 


يمكن أن يقوم المستخدم بتغيير حجم الإطارات عن طريق تحريك الخط الفاصل بينهما و الظاهر 
بوضوح في الشكل السابق (انظر الشكل 59)»؛ يمكن إلغاء هذا السلوك للإطارات عن طريق إضافة 


الواصفة noresize="noresize"‏ إلى وسوم .<frame>‏ 


في المثال السابق كانت الإطارات بشكل عمودي و لهذا تم استعمال الواصفة 6015© مع الوسم 
<1/8006561>: و يمكن جعل الإطارات بشكل أفقي عن طريق استبدال الواصفة 6015 بالواصفة 
5 لتصبح الصفحة كمايلي في مستعرض الويب: 


اهسك د ا :1ت 2 
EEE ONE o ma‏ م 


۳ Favorites چ‎ @ | SQL Injection and Cross-Si... 8ً 1000 Popular jQuery Plugi... 


2> 
© cC\Users\Mukhtar\Deskto... «(م‎ - O - حا‎ © + Pager safety Tools v 


| Hi!, | am pagel 


Hi!, | am page2 


¥ Computer | Protected Mode: Off e v> © 12596 > 


الشكل "١‏ : استخدام الإطارات بشكل أفقي 


تذكرة: يمكن جعل الرابط يعرضص محتواه في إطار معيّن عن طريق إسناد اسم الإطار إلى واصفة target‏ الخاصة 


بالرابط <3> (انظر فقرة الروابط التشعبيّة 5امأا). 


في حين أن الوسمين <]1/300656> و <119006]> يستخدمان لإنشاء صفحة أم تضم مجموعة من 


الصفحات فقط في إطاراتها فإن لغة ا11۷ توفر الوسم <113076> لتضمين صفحة ويب في 


تحميل المزيد من الكتب : com‏ . 222302 2 ط- متت 1 . اوها 


صفحة أخرى بشكل متناسق مع بقية محتوى الصفحةء و يستخدم الوسم <113076> بالصيغة 
التالية: 


<iframe SIC" URLl></i1fFame> 


حيث أنّ الا هو مسار الصفحة التي سيتم تضمينهاء و يمكن ضبط حجم الإطار عن طريق 
الواصفتين واه" و ٣لاس‏ بالبكسل أو بالنسبة المثوية. 


آخر ما يجب ذكره هنا أن هناك مستعرضات لا تدعم الإطارات» كما أنّ الإطارات ستلغى مستقبلاً 


من اللغة» على الرغم من أن بعض المستعرضات ما زالت تدعمها إلى تاريخ كتابة هذه الأسطر. 
عناصر ال 1»13/! 


ذكرت في بداية هذا الفصل أنَّ هناك عناصر غير مرئية تضاف في منطقة رأس الصفحة بين 
وسمي <1630> و <7630/> تستخدمها محركات البحث من أجل تصنيف صفحتك و عرضها 
ضمن نتائج البحث» و هذه العناصر هي عناصر ال 77613» و بالطبع فمن الأهمية بمكان جعل 
محركات البحث تصتف صفحتك بشكل صحيح كي لا تخسر معظم زوار موقعك القادمين إثر 
عملية بحث ما على أحد محركات البحث. 


يتم تحقيق عناصر ال 17618 من خلال الوسم 77613 و بتمرير اسم ©7317 و محتوى content‏ 
لعنصر ال 177613 كواصفتين له» و لعل أهم عنصري 176198 في أي صفحة ويب هما العنصران 
اللذان يحملان الاسمين 005/'الا©»! و 06561101101 و اللذان يستخدمان كمايلي: 


<html> 
<head> 


<meta name="keywords" content="xhtml website test 
meta head"/> 


<meta name="description" content="this page 
demonstrates how to use meta elements"/> 


تحميل المزيد من الكتب : 


</head> 
ج0 وى لكك الصا فعلياً کون مارد‎ 


CA REL 2 


حيث يعرض عنصر ال 6a‏ ذو الاسم 005/لالا©»! مجموعة من الكلمات المفتاحية التي تظن 
أن المستخدمين سيبحثون عن أحدها ضمن المستعرض و الموجودة في صفحتكء أما عنصر ال 


8 ذو الاسم 065011011017 فيحوي وصفاً مختصراً عن المحتوى الذي تقدمه صفحتك. 


بالطبع عند عرض هذه الصفحة في مستعرض الويب لا تتوقع أن تشاهد محتوى عناصر ال ه۷6 
ظاهراً فمهمّة هذه العناصر كما قلنا هو تقديم بيانات عن البيانات الموجودة ضمن صفحتك. 

و بانتهاء حديثنا عن عناصر ال 1/6193 نكون قد أنهينا -بفضل الله- مناقشة لغة 111/1 بأغلب 
5 ] » و لكن قبل ذلك سنستعرض لغة ا1۲ الموسّعة أو ما يُعرف ب ا۷ 1۲× أمّا الآن 


فأرى أن نعرض جدولاً بوسوم 111/1! التقليديّة ليكون مرجعاً سريعاً عند الحاجة. 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


دليل وسوم HTML‏ 


الوسم 
< 


<!DOCTYPE> 


ات !> 


<a> 
<abbr> 
<acronym> 
<address> 
<applet> 
<area /< 

<b> 

<base /< 
<basefont /> 
<bdo> 

<big> 
<þlockqoute> 
<body> 

<br /< 
<button> 
<caption> 
<center> 
<cite> 
<code> 

<col /< 


<colgroup> 


تحميل المزيد من الكتب : 


الشرح 

لتحديد نوع المستند (سيتم الحديث عنه عند عرض ا١‏ 1۲×) 
رابط تشعبي 

اختصار لمصطلح إنجليزي مركب 
اختصار لمصطلح إنجليزي 

إضافة معلومات اتصال بمالك الصفحة 
تضمين تطبيق أ۴ام م۸ ضمن الصفحة 
تعريف» مقظلدة طنز الخويطة الصورة 
نص عريض 

تعريف بادئة افتراضية لمسارات الروابط 
تعريف نوع/لون/حجم خط افتراضي لنصوص للصفحة 
تغريقت 'أتجاه النضن 

نص كبير الحجم 

اقتباس طويل 

جسد الصفحة 

سطر جديد 

زر إرسال 

عنوان الجدول 

لتوسيط المحتوى 

اقتباس متوسط 

تعريف واصفات مشتركة لأعمدة الجدول 


تعريف مجموعة من أعمدة الجدول لتطبيق واصفات مشتركة عليها 


V٤ 


WWW. ع ل‎ 2 2122-5 3 211303 . com 


<dd> 
<del> 
<dfn> 
<dir> 
<div> 
<dl> 

<dt> 
<em> 
<fieldset> 
<font> 
<form> 
<frame /< 
<frameset> 
>h6>< إلى‎ >h1< 
<head> 
<hr /> 
<html> 
<i> 
<iframe> 
<img /> 
<input /< 
<ins> 
<isindex> 
<kbd> 


<label> 


تحميل المزيد من الكتب : 


وصف لمصطلح ضمن قائمة المصطلحات 
نص مشطوب 

تعريف مصطلح ضمن قائمة المصطلحات 
قائمة مجلدات 

قائمة المصسطلحات 

عنصيو قاقد اضيا تقاقفية اعسات 
نص مشدد عليه 

مجموعة حقول في نموذج 

تعريف حجم/نوع/لون الخط لنص معين 
و 

إطار 

مجموعة إطارات 

عناصر العناوين 

رأس المستند 

خط أفقي 

عنصر بداية المستند 

مائل 

إطار كعنصر من عناصر الصفحة 
صورة 

عنصر إدخال 

إنشاء فهرس قابل للبحث يتعلق بالصفحة 
نص بخط حاسوبي برمجي 


عنوان لعنصر ما 


<legeng> 
<li> 

<link /> 
<map> 
<menu> 
<meta /> 
<noframes> 
<noscript> 
<object> 
<ol> 
<optgroup> 
<option> 
<p> 
<param /< 
<pre> 

<q> 

<s> 
<samp> 
<script> 
<select> 
<small> 
<span> 
<strike> 
<strong> 


<style> 


تحميل المزيد 


عنوان لمجموعة عناصر الإدخال <11©|10561> 

عنصر القائمة 

ربط المستند بمستند آخر (سيمر معنا أحد استعمالاته في الفصل الثاني) 
تعريف خريطة صورية 

تعريف قائمة 

بيانات تعريفية عن ماهيّة محتوى المستند 

لإنشاء بديل لمحتوى الإطار في المستعرضات التي لا تدعم الإطارات 
لإنشار بديل لمحتوى السكربت في المستعرضات التي لا تدعم السكربت 
تضمين كائن برمجي 

قائمة مرتبة 

متجموعة من الخيازات المرتيظة منطفياً دمن خيارات القائمة المتشدلة 


نموذج لشيفرة برمجية 

سكربت برمجي (561104 313ل أو 01/61[ غالباً) 
قائمة منسدلة 

نص صغير الحجم 

تعريك كسم بطري و 

نص مشطوب 

نص عريض 

تعريف ورقة أنماط (يناقش في الفصل القادم بالتفصيل) 


<sub> 
<sup> 
<table> 
<tbody> 
<td> 
<textarea> 
<tfoot> 
<th> 
<thead> 
<title> 
<tr> 
<tt> 

<u> 
<ul> 
<var> 


<xmp> 


تحميل المزيد من الكتب : 


نص علوي 
جدول 
جسد الجدول 
خلية بيانات جدول 
عنصر إدخال نص متعدد الأسطر 
ذيل الجدول 
خلية عنوان رأس الجدول 
رأس الجدول 
عنوان المستند 
سطر الجدول 
نص teletype‏ 
قائمة غير مرتبة 
جزء متغير من النص 
الجدول ؛ : دليل وسوم 471/11! 


XHTML 


إن 11× هي اختصار ل ا1۲ eاطeXtensib‏ و التي تعني ا۷١۳‏ القابلة للتوسّع (البعض 
يدعوها ا١1‏ الموسّعة)» و هي لا تختلف عن ا1۲ التقليديّة من ناحية الوسوم و لا من 
ناحية الواصفات» و لكن ببساطة يمكن اعتبارها معايير أكثر صرامة لكتابة مستندات 11/1لا 
بشكل يتوافق و قواعد لغة .)eXtensible Markup Language) ×M|‏ و هذا ما يعطي 
صفحاتنا توافقيّة أكبر مع مستعرضات الويب» كما يدل الالتزام بمعايير ا۷ 1۲× على احترافية 
أكبر في العملء و بالطبع لا أريد لتفكيرنا -كمطوّري ويب- أن يبقى محصوراً في مستعرض الويب 
الخاص بالحاسوب» فلنفكٌر في مستعرضات الويب الخاصة بالهواتف الذكيّة أو بالأجهزة الصغيرة 
الأخرى و لنسأل أنفسنا: هل ستبدو صفحاتنا كما نريد على كل مستعرضات الويب؟» هذا ما تحاول 


XH‏ الإجابة عنه. 


ففي حين أن شبكة الانترنت تحوي مليارات صفحات الويب فتمَّةَ نسبة كبيرة من هذه الصفحات 
مكتوبة بشكل رديء - للأسف - يشبه مايلي على سبيل المثال: 


RLS‏ اك 
<heaD>‏ 
ال ع 51 کا SELLS ai Sy BURL‏ 


سات ا 


A۸ 


1117521 ME 


<p>This is a paragraph 


</boDy> 
مع أن الشيفرة أعلاه ستعمل على بعض المستعرضات إلا أنها باعتقادي لن تؤمّن أدنى فرصة‎ 
عمل لمن قام بكتابتها لأنها لا تعكس أدنى معرفه بكتابة ا1۳1 و أفضل ما يمكن أن يقال عنها‎ 
أنها مكتوبة بشكل رديء» و قد ظهرت 1111/1 للحد من انتشار صفحات كالصفحة أعلاه.‎ 


تحميل المزيد من الكتب : 


XHTML قواعد‎ 


لحن :اكش ن الماع ال لك ان تطيعها حون کا أ سورع 
HTML‏ فسيُعدُ الست تند XHTML‏ و أ تطيع تلخيص قواعد ا/21111 في مجموعة 
النضات الثالية" : 


٠‏ لا تنس وسم الإغلاق. 

٠‏ اكتب وسوم و واصفات صفحتك بأحرف صغيرة ٥28‏ /6/لا0ا. 
اراع أن يكون ترتيب وسوم الإغلاق متناظراً مع وسوم الفتح. 

» ضع القيم المُسنّدة للواصفات بين علامات اقتباس. 

ه لا تستغنٍ عن أي من وسوم <html>‏ و <body>‏ و .<head>‏ 


۵ ضع تعريف نوع المستند 00۲۴۴ في بداية صفحتك (سيعرض في الفقرة التالية). 
تعريف نوع المستند <006717/51!> 


تنص معايير 1۲× على أن كل صفحات الويب يجب أن تحوي في أول سطر منها على 
سطر التعريف <1000178!> و الذي يعني تعريف نوع المستند ©0/ا1 Document‏ 
0 أو 010 اختصاراًء و ذلك أن مستعرضات الويب تستخدم هذا السطر كمرجعيّة 
قواعديّة لصيغة الكتابة و لأنواع الوسوم في الصفحة»ء إضافة إلى استخدامها الواصفة 0155 


الخاصة بوسم البداية <4101> و التي تصف فضاء أسماء 50306 ١13006‏ الصفحة. 


تعرض الشيفرة التالية عنصر تعريف نوع المستند الذي تصادفه في أغلب صفحات 111/1اا و 
الذي يجب أن تكتبه كأول سطر من صفحتك إضافة للواصفة 17175 و بهذا يصبح الشكل العام 
لمستند 1111/1 كمايلي: 


' إنَّ أغلب ما سيتم ذكره من القواعد كان قد مر معنا في الصفحات السابقة على شكل ملحوظات. 


تحميل المزيد من الكتب : com‏ . 222202 2 ط- متت 1 www.‏ 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtml"> 
<hcead>lia <20ع2/>محتوى را الصفحة‎ 


HOV WEE A جك‎ GSO 


CAREN S 


يعتبر النوع (0٥۲۲ ۴٤۴<‏ !> المعروض أعلاه أحد أنواع المستند و يسمّى النوع 118051010021 


و الفقرة التالية تناقش الاختلاف بينه و بين الأنواع الأخرى. 


ملحوظة: <00077/55]!> ليس وسماً من وسوم اللغة و إِنّما هو سطر تعريف المستند. 


الأنواع 1۱ ختلفة 1 00 
في 1111/1 هناك أربعة أنواع مختلفة للمستند و هذه الأنواع هي: 
:XHTML 1.0 Strict .١‏ 


يحوي هذا النوع جميع وسوم ا/111آ! عدا الوسوم <applet>‏ و <basefont>‏ و 
<center>‏ و <dir>‏ و <font>‏ و <iframe>‏ و <isindex>‏ و <menu>‏ و 
>noframes>‏ و <5> و <5]7116> و <لا>» و لا يسمح هذا النوع باستخدام إطارات 


<13176561>: و سطر تعريف المستند من هذا النوع هو: 


4! 536 ترط‎ Em EVE LRG LN SCO DIED SER MIE 1 0 عع‎ E BALEN 
HEEE UWI OE 1 0 المع تنا‎ IZ 1 ا م ا و 10 يلاو فر‎ 


:XHTML 1.0 Tansitional .Y 


يحوي هذا النوع جميع وسوم ا11 و لكنّه لا يسمح كسابقه باستخدام إطارات 


<1131716561>: و سطر تعريف المستند من هذا النوع هو: 


تحميل المزيد من الكتب : com‏ . 222302 2 ط- متت 1 www.‏ 


EO‏ لاك DES‏ اهنم >1 2 BEM EUS‏ دض سهد ل 
SA E ED DDE‏ لقان WS‏ اناه ا ا مه كع انظ E KO a E N‏ لت مهدت 1" 
ع E KORA‏ 2251 01 


:XHTML 1.0 Frameset ." 


النوع هو : 


YEE BEML EVE OC ET NSO DAD SHAME MEO 2 2222 / ENE‏ 061 ات 
ك2 DAD XR EM Ef EAM ESE EO‏ 1ل WI SE OO TÛ RY SM E‏ 6 0265" 


:XHTML 1.1 .é 
مثلاً)‎ R۷ يماثل النوع 51/101 و لكنّه يتيح لك إضافات وحدات برمجِيّة خاصة (وحدات‎ 
على عكس المذكور» و سطر تعريف المستند من هذا النوع هو:‎ 


SI 81661212137 E EE RC NI SO 1 DD SOE E 1 1 
WE EOF AT o Jo OEE ESEN A1 DTD Em 1A „CEES 


التحقق من صحة صفحات XHTML‏ 


ننهي الحديث عن 111/1 بالتذكير أنه بإمكان مطوّر الويب (و غيره) أن يتحقق من مطابقة 
صفحة ويب ما لمعايير 1111/1 عبر الرابط: 


http: //www.w3schools.com/xhtml/default.asp 


ملحوظة: يعكس وضع رابط التحقق من مطابقة الصفحة لمعايير 1111/1 في صفحتك نوعاً من الثقة بقدراتك 


البرمجية باعتقادي. 


تحميل المزيد من الكتب : 


15 


ظهرت لغة ا11۷ التي شرحناها في الصفحات السابقة (المعروفة في الأوساط التقنية بالإصدار 
(HTML 4.01‏ في عام 868اممء و في الحقيقة فإن تطورات كثيرة ‏ حصلت على مفهوم الويب منذ 
ذلك الحين إلى يومنا هذاء و أصبحنا نسمع بما يعرف بال 2.0 ۷۷66ء كما أصبح من النادر أن 
نجد موقع ويب (أعني المواقع الجيدة) لا يقدم خدمات مثل تشغيل الفيديو و الصوت و غير ذلك» 
و هذا ما استوجب تطوير إصدار جديد من لغة ا11۷ بإضافة مجموعة جديدة من الوسوم و 


الواصفات إلى اللغة القديمة ليظهر الإصدار الجديد بالاسم 5 171/1ا. 


و من الميزات الجديدة التي جاءت بمجيء 5 ا11۷ ظهور وسوم خاصة لعرض الفيديو و 
الصوت و وسوم خاصة لكتابة المقالات أو الأخبار و وسوم خاصة للرسم إضافة إلى إضافة 
مجموعة جديدة من عناصر الإدخال الخاصة بالنماذج و غير ذلك مما سيعرض في الفقرات 


القادمة. 
مستعرضات الويب الداعمة ل 5 471/1 


لأن 5 ا1 ظهرت منذ فترة قصيرة نسبياً (بدأ العمل على وضع معاييرها عام )5٠١5‏ فإن 
معظم مستعرضات الويب القديمة لا تدعمها للأسفء و لكن المستعرضات الجديدة ستدعمها بكل 
تأكيد» ف 5 ا1۲ -برأيي- ستكون لغة بناء صفحات الويب المعيارية في المستقبل القريب و 
لهذا فقد “بدات: يعفن «المستعرضناكه يدعهما خا مثل' الإضطاراظ لاخر من مستعوضات: 


"519 و‎ Internet Explorer و‎ Opera و‎ Firefox , Google Chrome 


لا تعتقد أن دعم هذه المستعرضات كاف لجعل 5 ا1 اللغة الرسمية لتطوير الصفحات فهناك عشرات مستعرضات الويب الأخرى 


و التي تستخدمها نسبة مرتفعة من مستخدمي الانترنت الإجماليين. 
AY‏ 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


عنصر الفيديو 1060/ا 


تقدم 5 ا1۲۷ آلية بسيطة لعرض ملفات الفيديو ضمن صفحة الويب باستخدام العنصر الجديد 
<1/1060>. و يتم ذلك بإسناد القيم المناسبة إلى واصفتي الارتفاع 9اه" و العرض ١لاس‏ 
الخاصة به و من ثمَّ تمرير مسار ملف الفيديو عبر العنصر الابن <5010066> كقيمة لواصفته 


6 و تمرير نوع ملف الفيديو عبر الواصفة ©6/0» لنشاهد الشيفرة التالية على سبيل المثال: 


IA EMIL 
<head> 
<title> 
مثال على عنصر عرض الفيديو‎ 
</title> 
</head> 
<body> 


<video width="320" height="240" controls="controls"> 


<source src="movie.mp4" type="video/mp4" />‏ 
للأسف» المستعرض الحالي لا يدعم عنصر عرض الفيديو! 


</video> 


</body> 


</html> 


يظهر المحتوى النصي (الموجود بين وسمي البداية و النهاية للعنصر <0/060>) في 
المستعرضات التي لا تدعم 5 ا1۲ أمّا في المستعرضات الداعمة لها فستبدو صفحتنا كمايلي: 


| | 


تحميل المزيد من الكتب : www .learn-barmaga. com‏ 


© 01716 ÇÎÊÈÇN ããaãçN' 
€ 7 © Ofile:///C:/Users/Mukhtar/Desktop/1.html 


الشكل :۳١‏ عنصر عرض الفيديو الجديد كما يبدو في مستعرض جوجل كروم 


ملحوظة: إلى هذه اللحظة فإن العنصر <17/1080> يدعم تشغيل ثلاثة أنواع من صيغ الفيديو و هي الصيغ 
24 و Ogg‏ و .WebM‏ 


يعرض الجدول التالي واصفات العنصر <10/1060>: 


الواصفة القيم الممكنة ‏ الشرح 

muted audio‏ كتم الصوت 

autoplay autoplay‏ التشغيل التلقائي لملف الفيديو 

controls controls‏ عرض شريط الأدوات في مشغل الفيديو 

height‏ قيمة بالبكسل © |ارتفاع مشغل الفيديو 

loop loop‏ إعادة تشغيل الفيديو بشكل تلقائي عند انتهائه 

poster‏ رابط تشعبي رابط تشعبي لصورة تعبر عن مقطع الفيديو و تظهر قبل 
أن يقوم المستخدم بتشغيله 

src‏ رابط تشعبي رابط ملف الفيديو 

width‏ قيمة بالبكسل | عرض مشغل الفيديو 


الجدول ٠‏ : واصفات العنصر <1060/ا> 


تحميل المزيد من الكتب : 


عنصر الصوت o٥اAud‏ 


تتيح 5 ا11۷ عرض ملفات الصوت ضمن صفحة الويب ببساطة شديدة من خلال العنصر 
<0010ا2> و الذي يستخدم بطريقة مشابهة لعنصر عرض الفيديو كمايلي: 
CREM‏ 
56461 > 
ع > كا EE SES LE O‏ 2 الع ايام 
</head>‏ 
<body>‏ 
<audio controls="controls">‏ 
<source src="song.mp3" type="audio/mp3" />‏ 
للأسف» المستعرض الحالي لا يدعم عنصر عرض الصوت! 
</audio>‏ 


TOO 


</html> 
يبدو هذا المثال في المستعرضات التي تدعم هذا العنصر كمايلي:‎ 


ج331 الابغ18؟ 61716 © 
file:///C:/Users/Mukhtar/Desktop/1.html‏ © © ج 


1 TTT 00:00 


الشكل ۳۲ : عنصر عرض الصوت الجديد كما يبدو في مستعرض جوجل كروم 


تحميل المزيد من الكتب : com‏ . 222302 2 ط- متت 1 . اوها 


ما في المستعرضات التي لا تدعم هذا العنصر فسيظهر النص المذكور بين وسمي البداية و 
النهاية للعنصر <audio>‏ و الذي يحوي رسالة الاعتذار. 


ملحوظة: إلى هذه اللحظة فإن العنصر <310010> يدعم تشغيل ثلاث صيغ لملفات الصوت هي 1/53 و 099 و 
.Wav‏ 


يعرض الجدول التالي واصفات العنصر <810010>: 


الواصفة القيم الممكنة الشرح 

autoplay autoplay‏ التشغيل التلقائي لملف الصوت 

controls controls‏ عرض شريط الأدوات في مشغل الصوت 

loop loop‏ إعادة تشغيل ملف الصوت بشكل تلقائي عند انتهائه 

preload preload‏ تحميل الملف الصوت عند تحميل الصفحة بغض النظر 
عن خاصية التشغيل التقائي و عن نقر المستخدم لزر 

src‏ رابط تشعبي رابط ملف الصوت 


الجدول ٠‏ : واصفات العنصر <1060/ا1> 
عناصر النماذج ۴٥٣٣۶‏ 
تقدم 5 ا11 مجموعة جديدة من عناصر الإدخال الخاصة بالنماذج ۴0٥۲۳١١‏ بالإضافة إلى 


مجموعة جديدة من أنواع عنصر الإدخال التقليدي <01ام10أ>: و سنبدأ حديثنا بالحديث عن الأنواع 


الجديدة للعنصر <01ام10> و التي يعرضها الجدول التالي: 


قيمة الواصفة 41/06 الشرح 


email‏ عنصر خاص لإدخال البريد الإلكتروني 
url‏ عنصر خاص لإدخال الروابط التشعبية 
number‏ عنصر خاص لإدخال الأرقام 

كم 


تحميل المزيد من الكتب : com‏ . 222302 2 ط- متت 1 . وده 


range‏ عنصر خاص لإدخال قيمة محصورة بمجال معيّن سلفاًء» و يظهر هذا 
العنصر على شكل شريط تمرير 

date‏ عنصر لإدخال التاريخ (يوم/شهر/سنة) 

month‏ عنصر لإدخال التاريخ (شهر/سنة) 

week‏ عنصر لإدخال التاريخ و يستخدم لتحديد أسبوع من السنة 

time‏ عنصر لإدخال الوقت (ساعة/دقيقة) 

datetime‏ عنصر لإدخال التاريخ و الوقت (الساعة/اليوم/الشهر/السنة)» بالتوقيت 
العالمي 

ا2ء ا- datetime‏ عنصر لإدخال التاريخ و الوقت» بالتوقيت المحلي 

6×) عنصر لعرض مربع البحث و هو شبيه بالنوع‎ search 

color‏ عنصر لإدخال القيم اللونيّة 


الجدول ۷ : أنواع عناصر الإدخال الجديدة في 5 ا۷١1۲‏ 
لنشاهد المثال التالى: 


IDO CEE ساك‎ 


IAI IL 
<body> 
<form action="" method="get"> 
Name : 


tVYPeE > text Mame SlANE Mame! / CDI />‏ لض كه 


MALLS 
<input type="email" name="stdnt email" /><br /> 
Website: 


EVpe= url! name SLANE 021" /><BIr />‏ الاص كه 


Points: 


Av 


تحميل المزيد من الكتب : www .learn-~barmaga . com‏ 


<input type="range" name="points" min="1" 
max="10" /><br /> 


Dale e 
<input type="date" name="user date" /><br /> 
<input type="submit" /> 
JEON 
€ 15565 
</html> 


يبدو المثال السابق كمايلي في مستعرض الويب: 


© html5.html Ea 
| »© C © file:///C:/Users/Mukhtar/Desktop/html5.html 


name: test 
E-Mail: test@site.com 


| Website: |http:/iwww.site.com 


Points: J) 
Date: 2011-08-24 


Submit 


الشكل *": عناصر الإدخال الجديدة كما تبدو في مستعرض كروم 
بالإضافة لما سبق ذكره تقدم 1111/15 مجموعة من وسوم النماذج الجديدة و منها الوسم 
<0218/151> و الذي يستخدم لإنشاء القوائم المنسدلة كخيارات إدخال افتراضيّة لأحد عناصر 
الإدخال الموجودة و يُنشأ محتوى القائمة بالتعاون مع وسم <0011007> و بطريقة مشابهة للعنصر 
القديم <56|661>. كما يتم تمرير اسم قائمة الخيارات الافتراضية (عنصر <]0318/1151>) لعنصر 
الإدخال عبر الواصفة الجديدة ]5ذاء لنشاهد المثال التالي: 


A۸ 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


DO GEE E EARS 


SEES 
<body> 
<form action="" method="get"> 
name : 


<input type="text" list="names_ list" 
name> SANE _Meamel /-<DE 4> 


<datalist id="names_list"> 
<option label="A" value="nameA" /> 
<option label="B" value="nameB" /> 
<option label="C" value="nameC" /> 
</datalist> 
TOMS 


VOCS 


C/A 

من العناصر الجديدة التي قدمتها 1۲۷1-5 أيضاً العنصران ١<‏ #ورم)> و <أاماناه>» حيث 
يستخدم العنصر <90860ا1©6> في عمليات تسجيل الدخول و التحقق من المستخدمين 
0 وو ذلك عبر توليد زوج مفاتيح (مفتاح عمومي/مفتاح خصوصي) يرسل مع 


<keygen name="security" /< 


أما العنصر <األامالاه> فيستخدم لعرض مخرجات 0١1010015‏ من أنواع مختلفة مثل نتائج 


الحسابات أو القيم المُعادَة من أحد توابع 5601101 4۷2ل كمايلى: 
و القر من احد توابع : 


62 يباصع نان 7<" زا iA "result" ONTIOIMINGUL=rESCANE‏ نيام اران > 


Too 
لكك ا‎ 
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عنصر المَرسّم 0311/35 

تقدم 5 HTML_‏ عذ 1 <0321/35)> و الذى يتيح لك ١‏ شمن صفحة الويب باستخدا 
م كدر a‏ والدى ييخ لك ارم كبن م 

56101 مهل " و بذلك تستغني عن أية إضافات خارجية 75أونااط كإضافات ال 1193585 على 

شل اماد 

لاستخدام عنصر المرسم يتم إنشاؤه أولاً بارتفاع 1914© و عرض 1019/لا محددين كمايلي: 


<canvas id="myCanvas" width="200" height="100"></canvas> 


ثم يتم الرسم عليه باستخدام 501101 4۷4ل بشكل مشابه لمايلي: 


<script type="text/javascript"> 


var c=document.getElementById ) "2770327735 "( م‎ 
Va 6262-6 02 6 03 2 5 كدت‎ ZA), 

© E للك‎ LS E le f 80000 

CS E EN REE E COO SO 5 


ASSEN 


حك قميا أولاً بتي عر | كلوق ا لخا مدي :ذلك فال : 
و علصر المرسم. عن طريق ص ډه و هي 


var c=document.getElementById ("myCanvas"); 


ثمَّ قمنا بإنشاء كائن 00[6©1 من المرسم و هيأناه للرسم ثنائي الأبعاد 20 في السطر التالي: 


( 26 ) 90-25351252226 22-25 عت 


الآن و للقيام بالرسم سيتم استدعاء طرق 11617005 الكائن × الذي تم إنشاؤه قبل قليل بالشكل: 


ESE EA SEY LES E EE OO OO 
ESE E Re GE OO 1507 5 


' يمكنك قراءة المزيد عن 561101 4۷4ل في مرجع آخر فهي خارج نطاق هذا الكتاب و لكنني سأحاول شرح استخدامها في الأمثلة. 
۹۰ 
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ففي السطر الأول تم تحديد اللون الأحمر لوناً للشكل الذي سيتم رسمه (هذا ما تعنيه القيمة 
۴0م“ ثمَّ تم رسم المربع بتمرير إحداثيات ركنيه الأيسر العلوي و الأيمن السفلي بشكل 
مشابه لما فعلناه عند تحديد مناطق الخريطة الصورية (انظر فقرة الخرائط الصورية). 

يبدو المثال السابق ضمن الشيفرة الكاملة لصفحة الويب كمايلي: 


DO GEE E RRS 


<html> 


<body> 


<canvas id="myCanvas" width="200" height="100"> 
لا يدعم مستعرضك عنصر المرسم‎ 


</canvas> 


<script type="text/javascript"> 
var c=document. getElementById ) "103703122535 "( ; 
var cxt=c.getContext ("2d") ; 
cxt.fillStyle="#FFO0000"; 
cxt.fillRect(0,0,150,75); 
</script> 
< 9661 


>21! 


يعرض الجدول التالي بعض طرق 11617005 كائن المرسم و وظيفة كل منها: 


“ سيتم في الفصل الثاني عرض مفهوم الألوان في | |/ا!11 1!. 


5 


5 . 5 1 | 
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cxt.fillStyle="#FFO0000'; تحديد لون التعبئة‎ fillStyle 

cxt.fiIRect(0,0,150,75); رسم مستطيل‎ fillRect 

cxt.moveTo(10,10); إزاحة مبدأ‎ moveTo 
الإحداثيات‎ 

cext. إنشاء تدرج لوني‎ | inearGradient 

createLinearGradient(0,0,170,50) 

cxt .addColorStop(0,"#FF0000"); | إضافة لون إلى‎ addColorStop 
التدرج اللون‎ 

cxt.drawlmage(img,0,0); لرسم صورة‎ drawlmage 

cxt.line1o(150,50); لرسم خط مستقيم‎ lineTo 


الجدول ۸ : بعض طرق كائن العنصر <2311/35©> 
تخزين البيانات من طرف العميل 
تتيح 5 ا۳۲ كائنين مختلفتين لتخزين البيانات من طرف العميل 011611) و هما: 


.١‏ الكائن ©0631510306!: يستخدم هذا الكائن لتخزين البيانات من طرف العميل لفترة غير 
محدودة و يستخدم الصيغة العامة التالية للتخزين: 


localStorage.varName="value"; 


حيث أن 7313/3006 هو اسم المتغير و 3/06 هي قيمة هذا المتغير و يمكن استرجاع 
ف افر اليك العامة الا 


localStorage.varName; 


؟. الكائن ©5©55101510130: يستخدم هذا الكائن لتخزين البيانات من طرف العميل لفترة 
محددة بجلسة واحدة فقط» و يستخدم الصيغة العامة التالية للتخزين: 


1, 
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حيث أن 7312/3006 هو اسم المتغير و 3/06 هي قيمة هذا المتغير و يمكن استرجاع 


sessionStorage.varName="value"; 


قيمة المتغير بالصيغة العامة التالية: 


sessionStorage.varName; 


ملحوظة: هذان الكائنان يستخدمان كمخازن خاصة للبيانات أثناء كتابة شيفرات 56011014 3/اهل. 


دليل الوسوم الجديدة في 5 ا1۲۷ 


ختاماً لهذا الفصل نعرض فيمايلي جدولاً بالوسوم الجديدة في 5 71/1!ا: 


الوسم 
<article>‏ 
<aside>‏ 
<audio>‏ 
<canvas>‏ 
<command>‏ 
<datalist>‏ 
<details>‏ 
<embed>‏ 
<figcaption>‏ 
<figure>‏ 
<footer>‏ 
<header>‏ 
<hgroup>‏ 
<keygen>‏ 


<mark> 


تحميل المزيد 


جانب من محتويات الموقع 

لتشغيل ملفات الصوت 

للرسم برمجياً 

زر أوامر 

قائمة خيارات افتراضية لعنصر إدخال 
تفاصيل عنصر ما 

تضمين عنصر تفاعلي أو 7أ00اام خارجي 
عنوان عنصر <18لا110> 

مشرعة كن عاضر الا 

ذيل منطقة من مناطق الصفحة 

رأس منطقة من مناطق الصفحة 
معلومات عن قسم من المستند 
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<meter> 
<nav> 
<output> 
<progress> 


<rp> 


>< 

<ruby> 
<section> 
<source> 
<summary> 
<time> 
<video> 


<wbr> 


تحميل المزيد من الكتب : 


قياسات محصورة بمدى محدد مسبقاً 

روابط تشعبية 

عرض خرج من نوع ما 

شريط تقدّم لمهمة من نوع ما 

يستخدم لغة ۷٥ا۸‏ للتصريح عن ما سيتم عرضه في حالة كون المستعرض لا 
يدعم عنصر RU۷‏ 

شرح لما تم التصريح عنه باستخدام عنصر ۷ں 
عنصر Rub۷‏ 

اتعريفت هناد 'الوساقط 

يعرف ترويسة العنصر !06131 

التاريخ/الوقت 

لعرض عناصر الفيديو 

سطر جديد محتمل 


الجدول ٩‏ : دليل الوسوم الجديدة في 5 ا1۲۷ 


الفصل الثاني 


CSS 3 


4° 


WWW 
. learn 
ط-‎ 
armaga. Com : الكتب‎ 
: تحميل المزيد من الكتب‎ 
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مقدمة 


تعلّمنا في الفصل الماضي كيفيّة كتابة مستندات الويب باستخدام لغة 1۲-5 و لكننا لم نتطرّق 
لنواحي كثيرة تتعلق بمظهر و تنسيق تلك المستندات» و في الحقيقة فقد كان هذا الأمر مقصوداً 
لأن ما يتعلق بالشكل و المظهر هو من مهمّة أوراق الأنماط الانسيابيّة 055 التي يناقش هذا 
الفصل أحدث إصداراتها و الذي يعرف ب 553©, و لكننا -في واقع الأمر- لا نستطيع أن 
نتحدّث مباشرةً عن 0553 لذلك سنتحدث قبل ذلك عن 055 التقليدية. 


ما هي C88‏ ؟ 


إن 55© هي اختصار للأحرف الأولى من الجملة She‏ ه511 0356301570 و التي تُرجِمَتْ 
على أنها 'أوراق الأنماط الانسيابيّة"'. ففي حين أن 111/1 تهتم بوصف عناصر مستندات الويب 
فإن C88‏ تهتم بوصف شكل و مظهر هذه العناصرء و قد كان ظهور أوراق الأنماط الانسيابية 
الماحق الرئيسي لمشكلة من أكبر المشاكل التي واجهت مطوّري الويب لسنوات قبل ظهورهاء و 
الفقرة التالية تعرض هذه المشكلة. 


مشكلة مطوري الويب قبل 055 


عندما تم تصميم لغة ا۳۲۷ كان التركيز الأكبر على تصميم لغة تصف عناصر صفحات الويب 
فقطء و لم يكن هناك أي توجه لدى مصممي ا11۷ أن تهتم لغتهم بمظهر و شكل المحتوى 
المقدّم» و نْرِكَتْ هذه المهمة لمصممي مستعرضات الويب» حيث كان -و ما يزال- كل مستعرض 
من مستعرضات الويب يعرض كل عنصر من عناصر صفحة الويب بمظهر افتراضي خاص به 


حسبما رأى مصممو المستعرض و بغض النظر عن رغبة مصمم الصفحة. 


' هذه الترجمة هي الغالبة على المراجع العربية. 
۹۷ 
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تم التنبه لهذه النقطة لاحقاً فأضيفت وسوم جديدة تهتم بالتنسيق و من أمثلتها الوسم <001/> الذي 
يستخدم لعرض نص بنوع خط (بنط)'' 2084 و حجم و لون محدد ضمن الصفحة» و كان هذا 
شيئاً جميلاً في أول الأمر لكنه سرعان ما تحول لكارثة بالنسبة لمطوري الويب» فقد كان هناك 
تنسيق هذه الصفحات تحتاج لوقت و جهد كبيرين» ناهيك عن الحاجة إلى التركيز الشديد في ضبط 
خصائص الوسوم المذكورة سابقاً للحصول على صفحات بألوان و أحجام و أنواع خطوط موحدة و 


متجانسة» لكن و من حسن الحظ فقد تالاشت هذه المشكلة مع ظهور .CSS‏ 


بعض المواقع التي يصل عدد صفحاتها إلى مئات أو آلاف الصفحات أحياناًء مما يعني أن عملية 


ما يعني بالنسبة لمطور الويب أنه سيقوم بكتابة وصف لشكل و مظهر الوسم في مكان واحد و لمرة 
واحدة فقطء ثمَّ سيْطبّق هذا التنسيق على جميع مستندات الويب المرتبطة بذات ال 88©. 


البدء في استخدام 055 
هناك ثلاث طرق لاستخدام أوراق الأنماط الانسيابية 55© في صفحتك: 
.١‏ 055 السطريّة 55© عم زاما: 


يتم إسناد شيفرة C558‏ إلى الواصفة 519/16 الخاصة بكل عنصر على حدّىء انظر المثال 
التالي: 


<2/>محتوى الفقرة<":2:2©0ه1هم "-513716 <p‏ 


و هذه الطريقة غير مفضلة -بالنسبة لي- لأنها تعيدنا لمشاكل ما قبل 055. 
؟. 055 الداخليّة (الدفينة) 055 :Embeded‏ 


'' مع عدم اقتناعي بترجمة 5001 إلى 'بنط" لكنها وردت هكذا في معجم مصطلحات المعلوماتية الصادر عن الجمعية العلمية السورية 


للمعلماتية و سأسمح لي باستخدام خط كترجمة ل 1006 في كتابي هذا. 
۹۸ 
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يتم كتابة شيفرة 055) في منطقة ال ۳163١4‏ من الصفحة بين وسمي <هالا]5> و 
<هاراء/> لتصبح الصفحة بالشكل: 


A للع‎ 

>56 6612 

<style type="text/css"> 
655 هنا يتم كتابة شيفرات‎ 

</style> 

</head> 

<body> 
تجتوى شد ما‎ 


< OOO 


TY BEME: 
و تعتبر هذه الطريقة جيدة للمواقع ذات العدد المحدود من الصفحات أما بالنسبة للمواقع‎ 
المتوسطة و الكبيرة فأفضل استخدام الطريقة الثالثة.‎ 


۳. 055 الخارجيّة :External CSS‏ 
يتم كتابة كامل شيفرة 55© في ملف مستقل يحمل الامتداد 055. أولآً» ثمَّ يتم ربط هذا 
الملف مع صفحة الويب باستخدام الوسم </110> في منطقة رأس الصفحة عبر تمرير 


مسار الملف إلى واصفته ۸۲6۴ و تحديد نوع العلاقة ب +©©576ع1/إغ5 كمايلي: 


<html> 
<head> 


<link rel="stylesheet" type="text/css" 
href="style.css" /> 


heads 


9 


تحميل المزيد من الكتب : com‏ . 220203 3 طح ص2 2 16 . www‏ 


<7/6017>مفجحتوى الصفحة هذنا<56057> 


> 


و هذه الطريقة هي الطريقة المثالية لاستخدام C858‏ برأيي. 
شيفرات 655 
تتكون شيفرة 55© من مجموعة من القواعد 0165ا9ا» تصف كل قاعدة منها مظهر عنصر أو 
مجموعة من العناصر في الصفحة»ء و الشكل العام لقاعدة 6585© هو: 


selector 1 
81126851512 517 3 


PEO EE EV: EE 


[EOS EE VEIL USF 


و هذا ما يقوم بتطبيق جميع خصائص المظهر المذكورة بين القوسين ) و على كافة عناصر 
الصفحة التي تطابق المُحَدّد 56/60101. 


ملحوظة: كما يبدو من اسمها فالمحددات تستخدم لتحديد عنصر أو مجموعة عناصر من صفحة الويب بغية تطبيق 
قواعد °55 عليهاء و المُحَدّدات كثيرة و متنوّعة في 055 فقد يكون المُحَدّد في أبسط حالاته اسماً لأحد وسوم 
HM‏ مثل 51 أو 3 أو م» و قد يكون المُحَدّد 10 لعنصر ما مثل #link1‏ أو #6680611 أو #searchForm‏ 
و قد يكون غير ذلك» و بالطبع سيتم شرح مجموعة من المُحدّدات بشكل ضمني في الفقرات التالية كما سيتم عرض 
جدول بكافة المحددات مع معانيها في نهاية الفصل. 


يتم ذكر كل خاصية من خصائص 055 بشكل زوج اسم/قيمة بالشكل: 


property:value; 
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حيث أن 0100611 هي اسم خاصية المظهر و 73106 هي قيمة الخاصيةء و ينتهي تعريف 


الخاصية بالفاصلة المنقوطة؛ و سنبدأ باستعراض كافة الخصائص اعتباراً من الفقرة التالية. 


تذكرة: ك ا11۷ فإن 055 لا تعطي أي قيمة لمحارف الفراغات و إنما يتم استخدامها لغرض تسهيل قراءة 
الشيفرة فقط. 


توفر C55‏ مجموعة من الخصائص لتنسيق مظهر النصوص و هي: 
٠‏ خاصية المحاذاة 161-3110917 و التي تستخدم كمايلي: 


h1 {text-align:center; ( 


حيث أن المحدد ۸1 يعني جميع عناصر <1> في المستندء و يمكن إسناد القيمة ٤٣وا‏ 
إلى الخاصية 31180-<«©+ لمحاذاة النص لليمين أو |6۴١‏ لمحاذاة النص لليسار أو /©6101© 
لتوسيط النص أو /15أ5لاز لجعل جميع أسطر الفقرة متساوية العرض 1015للا. 

٠‏ خاصية التزيين (التأثيث)'' 16-06060186107 و التي تستخدم كمايلي: 


a {text-decoration:overline; (‏ م 


حيث أن المحدد 3 م يعني جميع عناصر الروابط <3> الموجودة ضمن أي من عناصر 
الفقرات <0> في المستندء و القيمة 01611176 تعني عرض خط أعلى النصوص» و يمكن 
إسناد القيم التالية: ©5007 لإلغاء التزيين أو 00611156نا لعرض خط أسفل النص أو 
061 -156| لشطب النص. 


٠‏ خاصية اتجاه القراءة 01861101 و التي تستخدم كمايلي: 


'' هم يعربون 08٥0۲‏ على أنها "أثاث" و لهذا أوردت التأثيث بين قوسين» علماً أنني أرى أن التزيين هي الترجمة الأنسب. 


تحميل المزيد من الكتب : 


DD 4112152 عات‎ MOR E عات‎ | 


لجعل اتجاه القراءة من اليمين إلى اليسار و هذا ما تعنيه القيمة !16 (اختصاراً ل 10 4اوأ؟ 
8©). و يمكن جعل اتجاه القراءة من اليسار لليمين بإسناد القيمة ١ا‏ إلى الواصفة 
.direction‏ 

٠‏ خاصية تحويل حالة الأحرة ف 210۸ te» transfor‏ و التي تستخدم كمايلي: 


{text-transformation:uppercase; }‏ م 


لجعل جميع أحرف عناصر <0> بحالة الحرف الكبير "'» و يمكن أن تأخذ هذه الخاصية 
القيم ©006/635نا للحروف الكبيرة أو ©1011/6/635 للحروف الصغيرة أو 118/1126م02© 
لجعل الحرف الأول فقط من كل كلمة حرفاً كبيراً. 

٠‏ خاصية إزاحة البداية 16-1706101 و التي تستخدم كمايلي: 


Dl EEE RESEN EE 205222 


لإزاحة أول كلمة من المقطع بمقدار ٠١‏ بكسل» و الإزاحة غالباً ما تستخدم مع بداية فقرات 


اللغة الإنجليزيّة. 
٠‏ خاصية اللون 001017 و التي تستخدم كمايلي: 


SESE‏ عت ACO‏ كر 


حيث أن المحدد م يعني جميع العناصر <> الموجودة في الصفحة» و يتم إسناد اللون 
للخاصية /6010 إما بإسناد اسم اللون باللغة الإنجليزية مثل ۲٥۴١‏ أو 9/866 أو white‏ 


..إلخ» أو بإسناد قيمة اللون بالنظام الست عشري 1990661081 مثل #۴۴0000 أو 


'. هناك لغات تعطي أكثر من رسم لنفس الحرف فمثلاً الحرف الأول في الإنجليزية يرسم ۸ إذا كان في حالة الحرف الكبير و 3 في 


حالة:الحرف الصفين: 


تحميل المزيد من الكتب : 


#00۴0 أو #۴۴۴۴۴۴ ..إلخ» أو بإسناد قيمة اللون عبر التابع 695 بالشكل 
(5)255,0:0و أو (98)0,255,0 أو (90)255,255,255 ..إلخ. 


توضيح: يتشكل كل لون من مزج ثلاثة ألوان هي الأحمر و الأخضر و الأزرق» و تختلف الألوان عن 
بعضها باختلاف نسبة كل من الأحمر/الأخضر/الأزرق فيهاء و في حالة تمثيل اللون بالنظام الست 
عشري يتم اعتبار أول خانتين تمثلان درجة اللون الأحمرء و يتم اعتبار ثاني خانتين تمثلان درجة اللون 
الأخضرء و يتم اعتبار ثالث خانتين تمثلان درجة اللون الأزرق» و بالطبع تتدرج قيم كل خانة بين 00 
كأدنى قيمة و ۴۴ كأعلى قيمة» فعلى سبيل المثال للحصول على اللون البنفسجي يجب مزج اللونين 
الأزرق و الأحمر دون أي نسبة من اللون الأخضر و بهذا تصبح قيمة اللون البنفسجي #۴۴00۴۴ و 
يمكن التحكم بتدرج اللون عبر تخفيف درجة الأحمر و الأزرق لتصبحا على سبيل المثال #880088 و 
هكذاء أما في حالة تمثيل اللون عبر التابع ۲١‏ فتمثل الخانة الأولى اللون الأحمرء و تمثل الثانية اللون 


لنشاهد المثال التالي و الذي يعرض استخدام خصائص مظهر النصوص: 


>» 
<head> 
<title> 
E E 
CIEE 
<style type="text/css"> 
P 1 
text-align: justify; 
:عه1هم»‎ #220000 : 
text-decoration :underline; 


direction:rtl; 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


</style> 
</head> 
<body> 
<p> 
اال عتكا رد عن د ا و کد سد د لكك كم‎ 
ا ا فك کا ا 1 ا‎ |] 
بين وسمي بداية و نهاية هذه الفقرة ليظهر عمل خاصية‎ 
المجاة اة في لفطهة القاهة التي سوك اكع وكا لمدة الوا ةم‎ 
Dz 


إن هذه 


</body> 


REMI > 


و الذي يبدو في مستعرض الويب كمايلي: 


Windows Internet Exp 


© + - DEETESIEN E 
ht Favorites | چ‎ ©8( 1000 Popular jQuery Plugi... 


© ...صفحة اختبار لخصائص مظهر الن‎ ®>” - i dh + Page v 


إن هذه الصفحة عبارة عن صفحة اختبار لخصائص مظهر النص فى أوراق 


الأنماط الانسيابية و قد تعمدنا إطالة النص الموجود بين وسمى بداية و نهاية 
هذه الفقرة ليظهر عمل خاصية المحاذاة فى لقطة الشاشة التى سوف نعرضها 
لهذه الصفحة. 


Computer | Protected Mode: Off‏ ار 


الشكل 4" : استخدام خصائص مظهر النصوص 


WWW . 


خصائص الخطوط ۴٥٣۸٤۶‏ 


توفر C55‏ مجموعة من الخصائص للتحكم بالخطوط كأ١٥۴»‏ و يتم التعامل مع الخطوط في 
5 على شكل مجموعات تدعى كل منها ب'عائلة خطوط" /|أ5001-1910: حيث يتم إسناد خط 
يتيم "' أو أسماء أكثر من خط مفصولة بفواصل ٥١٣2‏ إلى الخاصية /|15001-1801 و يكون 
الخط الأول هو الخط الافتراضيء و في الحالة التي يتعذر على المستعرض فيها العثور على الخط 
الافتراضي فإنه يجعل الخط التالي هو الافتراضي و هكذا. 


توفر C55‏ ثلاثة عوائل افتراضية من الخطوط هي العائلة 5f‏ و العائلة 5305-5611 و 
العائلة 7/0170572366 و ينصح باستعمال العائلة الثانية للغة الإنجليزية و العائلة الثالثة عند عرض 


الشيفرات الحاسوبية مثل شيفرات لغات البرمجة في صفحة الويب. 


كما توفر C58‏ مجموعة أخرى من الخصائص للتحكم بالخطوط هي الخاصية هالإأهة-1001 و 
التي يمكن أن تسند إليها القيم ءاه (الخط المائل) و 50/7781 (الخط العادي)ء و الخاصية 
1001-526 و التي تستخدم لتحديد حجم النص بالبكسل أو بالواحدة 6۳ (كل ٠١ = 6۳ ١‏ 
بكسل)» لنشاهد المثال التالي: 


IAI EL 
<head> 
<title> 
وقحة اكباو لاني الخطود‎ 
EE LE 
<style type="text/css"> 


" اجترحت مصطلح الخط اليتيم للحالة التي تكون فيها عائلة الخطوط مكونة من خط واحد. 


تحميل المزيد من الكتب : com‏ . 22202302 ط- متت 1 www.‏ 


P 1 
font-family: "Tahoma", "Simplified Arabic", sans-serif; 
font-size:1. 5em; 
font-style:italic; 


61 125 GEN ONE EEL, 


</style> 
</head> 
<body> 
<P> 


إن هذه الصفحة عبارة عن صفحة اختبار لخصائص الخطوط في أوراق 
الإاتماط الالسبابيةه 


> / 8 
> BOS 


> 101 


و التي تبدو كمايلي في مستعرض الويب: 


Popular jQuery Plugi... @ | SQL Injection and Cross-Si...‏ 1000 )@ کپ Favorites‏ د 


@ صفحة اختبار لخصائص الخطوط‎ ® - E + كا‎ 999 + Pager Safety + Tools v 


إن هذه الصفحة عبارة عن صفحة اختبار لخصائص الخطوط في أوراق 
الأنماط الانسيابية. 


Computer | Protected Mode: Off 4 4000‏ ار 


الشكل 5” : استخدام خصائص الخطوط 


WWW . 


ملحوظة: لم نضع علامتي اقتباس حول القيمة 5305-5615 لأننا نقصد عائلة الخطوط الافتراضية و التي تحمل 


„sans-serif اسم‎ 


خصائص مظهر الروابط 


في الحقيقة لا توجد خصائص خاصة لمظهر الروابط» و لكن توجد محددات خاصة للروابط 
تستخدم لتنسيق مظهر الرابط في حالاته المختلفة» و المحددات هي: 


٠‏ !3:|10 و الذي يستخدم لتنسيق مظهر الرابط في حالته العادية و هو مكافئ للمحدد 3 إذا 
استخدمَ وحده. 

٠‏ 3:151160 و الذي يستخدم لتنسيق مظهر الرابط الذي تم النقر عليه مسبقاً. 

ه 2:10۷8 و الذي يستخدم لتنسيق مظهر الرابط عندما مرور مؤشر الفأرة عليه. 

©3:36]106 و الذي يستخدم لتنسيق مظهر الرابط لحظة النقر عليه. 


و المثال التالي يعرض استخدام هذه المحددات الخاصة: 


BEML 
<head> 

GELE LEZ 
صفحة اختبار لخصائص مظهر الروابط‎ 

</title> 

<style type="text/css"> 
a:link {text-decoration :none;color: blue; ( 
a:visited{color: green; } 
a:hover {text-decoration : underline; } 


a:active{font-size:120%;} 


</style> 


1۰۷ 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


</head> 
<body> 


<a 2 12ت‎ 2 71 1 mOEMaN Mma COE 


<a href="www.google.com">visited link</a> <br/> 


<a 0ت 5م‎ < L> 6 ات 6ت‎ CS 


a ل 1ت طن‎ 1-5 206412 OnE AWS OES 
> OOS 


</html> 


@ صفحة اختبار لخصائص مظهر الروابط‎ - Windows Internet Explorer ص‎ ee 


GOs le file:///C:/Users/Mukhtar/Dı | <“ ا م‎ J) Google EE 


<< 
( Favorites 9 €) 1000 Popular jQuery Plugi... @ | SQL Injection and Cross-Si.. | CSS Positioning 


2> 


Pager safety Tools ©9 >‏ + @ كا - O‏ - ® ...صفحة اختبار لخصائص مظهر الر @ 


normal link 
visited link 
hover link 


normal link 2 


الشكل ۳١‏ : هكذا تبدو صفحة اختبار مظهر الروابط لحظة النقر على الرابط الثالث و بعد زيارة الثاني 


ملحوظة: يجب ذكر قاعدة /3:101/6 بعد )ا:2 و a:visited‏ كما يجب ذكر a:active‏ بعد .a:hover‏ 


خصائص الخلفيات Backgrounds‏ 


توفر 055 مجموعة من الخصائص لتنسيق خلفيات العناصرء نبدأ استعراضها بالحديث عن 
الخاصية /536101010170-06010 و التي تستخدم لتحديد خلفية لونيّة لأحد العناصر بإسناد قيمة 


اللون إليها بالشكل: 


تحميل المزيد من الكتب : 


WWW . 


1 ا ترق اوج تان حرو م درن اا مقط 


و يمكن تعيين صورة كخلفية لأحد العناصر عبر إسناد مسار الصورة للخاصية -050ا0361©10 


© بالشكل: 


background-image : 1121 ) 1236© . [297 ( : 


و في حال كون حجم الصورة (الخلفيّة) أصغر من حجم العنصر يتم تحديد طريقة تكرار الصورة 
عبر الخاصة 09610/010000-160684 فيتم إسناد القيمة ×-#۵م٠۲‏ لتكرار الصورة بشكل أفقي أو 
القيمة 2-۷٠م٠۲‏ لتكرار الصورة بشكل عمودي أو ٠806314‏ لتكرارها بشكل أفقي و عمودي معاً أو 
00-6062 لعدم التكرار و هذا في الحالة الأولى» أما في الحالة الثانية فيمكن عدم تكرار الصورة 
و تحديد موضعها عن طريق الخاصية 03960190/010170-720511107 حيث يتم إسناد واحدة أو أكثر 
من القيم م10 left‏ أو left center‏ أو left bottom‏ أو center top‏ أو center center‏ أو 
center bottom‏ أو right top‏ أو right center‏ أو bottom‏ htوiا»‏ لنشاهد المثال التالي و 
الذي سنعرض فيه عنصرين <0> الأول بخلفية لونية و الآخر بخلفية صورية: 
<html>‏ 
<head>‏ 
LOY‏ 1ج > 
فة ا ال ااا 
2185 1ع / > 
<style type="text/css">‏ 
.firstP {‏ 
background-color :black;‏ 


color:white; 


} 


.secondP { 


تحميل المزيد من الكتب : www .learn-barmaga. com‏ 


background-image : url ) 'imagel. Jpg’ ( ; 
background-repeat:no-repeat; 


background-position: center center; 


} 
(QAEECE OME EEL J‏ 9 
CAS EE‏ 
</head>‏ 
<body>‏ 
<p class="firstP">‏ 
المتصر الأول ا يخلقفية ا 0 بن الون تمن ايض 
BX‏ 
<P class="secondP">‏ 
CN OE E E E OE‏ 55 ال 7 للش | 
5 ساقم بالترول ل اسر يبةه منج ملا المتصر 
<br/>‏ 
المساحة الكافة ادر العورة اة 
>0 
</body>‏ 
REL‏ /€ 
ملحوظة: هناك طريقة خاصة لتحديد العناصر تعرف باسم التحديد بالفئات 6135565 حيث يتم استبدال المحدد بأي 


اسم مسبوقاً بنقطة و هذا ما يعرف بتعريف الفئة 01355 في 55)., بعد ذلك يتم إسناد اسم هذه الفئة (دون نقطة) 


إلى الواصفة 61355 للعناصر التي نرغب بجعل مظهرها مطابقاً للخصائص المذكورة في قاعدة الفئة. 


يبدو المثال السابق في مستعرض الويب كمايلي: 


IN 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


تق > > 


Ez Favorites ¬ 8 1000 Popular JQuery Plug... 


ول ن 


الشكل ۳۷ : هكذا تبدو صفحة اختبار خصائص الخلفية 
٠‏ ء ٠.‏ 4 ا 
خصائص مظهر القوائم 


يتم تخصيص مظهر القوائم في C55‏ عبر تخصيص نوع الرمز/الرقم المعروض أمام كل عنصر 
من عناصر القائمة» و يتم هذا من خلال الخاصيتين التاليتين: 


«ه مملا-عالاs-اءا:‏ و التي تستخدم لتحديد نوع الرمز/الترقيم أمام كل عنصر من 
عناصر القائمة» و تأخذ القيم ©101أ© و 5011366 و ©0156 و 70576 في حالة 
القائمة غير المرتبة» و القيم 701021]-!06هلا و lower-roman‏ و lower-‏ 
3 و upper-alpha‏ و lower-latin‏ و upper-latin‏ و decimal‏ و 
غيرها في حالة القائمة المرتبة. 

ه 1306-هالا851-]15|: و التي تستخدم لوضع صورة خاصة أمام كل عنصر من 


عناصر القائمة كرمز له؛ و تستخدم بالشكل: 


list-style-image:url ('image.gif'); 


1۱۱ 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


لنشاهد المثال التالي: 


تحميل المزيد من 


IA EL 
<head> 
<title> 
صفحة اختبار لخصائص مظهر القوائم‎ 
>/ 61 21 
<style type="text/css"> 
ul {list-style-type: square; ( 
ol {list-style-image:url ('dot.gif');} 
</style> 
</head> 
<body> 
GUL 
SEEM 17/1: 


ALISLECEM 2> 


ECEM ON 


TS EE SE 


GIS ECEM 24 


ce ECEM 5> 
> اررق /ر‎ 


</body> 


€ RELY 


11۲۳ 


www. learn-barmaga. com : الكتب‎ 


لاا اقا ...ولح ]الا - صفحة اختبار لخصائص مظهر القوائم @ 


O0: | © CAUsers\Mukhtaı ا‎ 1 | XÎ) مومه‎ 
2< 


qh Favorites ج‎ © | 1000 Popular jQuery Plugi... 


© ...صفحة اختبار لخصائص مظهر الق‎ A-O. 


a item 1 
a item 2 


a item 3 


item 1‏ الا 
item 2‏ الا 


item 3‏ الا 


Computer | Protected Mode: Off 4 * A125% vw‏ تر 
= 


الشكل ۳۸ : هكذا تبدو صفحة اختبار خصائص مظهر القوائم في مستعرض الويب 
خصائص مظهر الجداول 


أظن أن الجداول هي أكثر عناصر ا11۷ التي تستفيد من 055 إذا عرف مطور الويب كيفية 
ترظيفت خصائض 658 الت رضت تايا الكل اندب ناه المكان التالي. ار 


EMI‏ كه 
<head>‏ 
<style type="text/css">‏ 
table‏ 
1 
: 1 5212 7 59525 21577 اتلك رت 8ض" : رز انمره 2 16 2ه 2 
EE RE OO‏ 


border-collapse:collapse; 


تحميل المزيد من الكتب : 


WWW . 


Cll HECE LOIS EL 


text-align:center; 


td, th 


font-size: lem; 


border:1lpx solid #98bf21; 


th 
1 
12 OME EZE E ل‎ 7 
م 110-001-0:42 20 وع1» قط‎ 
CO ESE E E EE E 
1 
.alt td 
1 
220001 7 
ضرق اوعد لقنن ناوعا ع5‎ FEAFZD3; 
/ 
</style> 
</head> 
<body> 
Ea lle > 
E 


> />الشركة<ط‎ t< 


١1 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


اك آخر ا 


حطع />العنوان < 2 > 


EBENEZER 


EE 


EI 


<ك ع / >الشركة الوهمية >10<٠١‏ 


<0خ / >دمتىق<كا> 


>td<اڀروس>/‎ td < 


VEE 


<tr class="alt"> 


<ك غ / >الشركة الوهمية 10<5> 


> >بغداد<0‎ / ٤ d< 


> 0< ع / >العراق‎ d< 


GEES 


SES 


يبدو هذا المثال في مستعرض الويب كمايلي: 


تحميل المزيد من الكتب 


11° 


الجدول 


CA EEO 


</body> 


JOEL S 


WWW. ع ل‎ 3 2122-5 3 211303 . com 


© C\Users\Mukhtar\Desktop\firstPage.html - Windows Internet Explorer 
ج‎ e | © | C\Users\Mukhtar\Desktc > +× | | | Google 
$ Favorites | چ‎ © [ 1000 Popular jQuery Plugi... @ | SQL Injection and Cross-Si... 


| C\Users\MukhtaNDeskto.. 3 ® - O - كا‎ © + Pager safety Tools © > 


الشركة الوهمية 1 
الشركة الوهمية 2 
الشركة الوهمية 3 
الشركة الوهمية 4 
الشركة الوهمية 5 
الشركة الوهمية 6 


ب | * 125% |7 Computer | Protected Mode: Off CQ‏ ار 


كد 


الشكل 5" : توظيف 655 لتنسيق مظهر الجداول 


و ما يجب ذكره من خصائص 055 عند الحديث عن المثال السابق هو مايلي: 


(0106: و التي يسند إليها قيمة بالبكسل تعبر عن سماكة حدود الجدول و لون يعبر عن 
لون الحدود بالإضافة إلى تحديد نوع الحدود (خط متصل 5010» خط متقطع 203560 
منقط 001160 .. إلخ)؛ و بالطبع يفصل محرف المسافة بين هذه القيم (سيتم الحديث عن 
هذه الخاصية بشكل أكثر تفصيلاً في فقرة لاحقة). 

ه 00066-0013056: و التي تحدد هل سيتم طي حدود الخلايا و اعتبار وجود حد واحد 
بين كل خليتين (القيمة ©201/3056) أم سيتم اعتبار حد كل خلية مستقلاً عن الآخر. 
ملحوظة: لتسهيل قراءة محتويات الجدول ينصح دائماً بجعل أسطر الجدول متناوبة ألوان الخلفية و ألوان النصوص 
كما فعلنا في الجدول المعروض في مثالنا السابق» و هذا ما حققناه عبر استخدام الفئة 214. » يعرف هذا التناوب 


اللوني باسم Zebra-stripping‏ 


WWW . 


خصائص الموضّعة 505111011110 


يكون محتواه كبيراً جداًء كما يتيح وضع عناصر خلف عناصر أخرى» و هناك عدة أنواع لتحديد 
موضع العنصر في 055 في الحقيقة و هي: 


« النوع الستاتيكي 518]6: يتم وضع العنصر في مكان ظهوره في الصفحة أي بحسب 
ترتيب و موضع ظهور وسمه ضمن وسوم الصفحة» و هذا النوع هو الافتراضي. 

« النوع الثابت 1©0: يتم وضع العنصر طبقاً لإحداثيات ثابتة يتم إسنادها بالبكسل 
للخصائص 100 و أا و 1011 و 801000 مع إسناد القيمة 18*60 إلى الخاصية 
هم و بالطبع يتم اعتبار الركن العلوي الأيسر للصفحة مركزاً للإحداثيات. 

« النوع النسبي ©19©131(30: يتم وضع العنصر طبقاً لإحداثيات ثابتة يتم إسنادها بالبسكل 
للخصائص 100 و أا و 1011 و 01101 مع إسناد القيمة ۷8ا٠۲‏ إلى الخاصية 
اام و يتم اعتبار الركن العلوي الأيسر للعنصر_نفسه في حالته الستاتيكية مركزاً 
للإحدائيات. 

« النوع المُطْلّق 18لاا6050: يتم وضع العنصر طبقاً لإحداثيات ثابتة يتم إسنادها بالبكسل 
للخصائص 108 و اها و 51011 و 011007 مع إسناد القيمة 3050116 إلى الخاصية 
7 و يتم اعتبار الركن الأيسر العلوي لأول عنصر أب بموضع غير ستاتيكي 
مركزاً للإحداثيات» و في حال عم وجود أي عنصر أب بموضع غير ستاتيكي يتم اعتبار 
الركن الأيسر العلوي للعنصر </11407> مركزاً للإحداثيات. 


لنشاهد المثال التالي: 


<html> 


<head> 


تحميل المزيد من الكتب : 


} 


CS EVINE VOCE LECE CSS LS 


x OTE EE MOR SE E 
al 
{ position:absolute; left:100px; top:150px; 


yle> 


E 


</head> 


هة ١‏ العو ان باجد اتيات انئش 


و الذي يبدو في مستعرض الويب كمايلي: 


© - 


تحميل المزيد من الكتب : 


في حالة الإحداثيات المطلقة يتم عرض العنصر طبقاً للإحداثيات الممرة لخصائصه بغض النظر عن مكان 


ورورد وسمه فى شيفرة الصفحة 


> 12596 © |> ني Computer | Protected Mode: Off‏ ار 


@ C\Users\Mukhtar\Desktop\firstPage.html - Windows Internet Explorer 


G@ 0 0 -| 4 | X || ) Google 


4 Favorites چ‎ © | 1000 Popular jQuery Plugi... e SQL Injection and Cross-Si... 
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هذا العنوان بإحداثيات مطلقة 


الشكل ٠١‏ : مثال على استخدام خصائص موضّعة العناصر في 655 


ملحوظة: المحدد الخاص * يقوم بتحديد جميع عناصر المستند. 


<body> 


ALS 


في حالة الإحداثيات المطلقة يتم عرض العنصر طبقاً <م> 
شر اتات الشميمد :5 حصا دة لعش انط عن من و ره رد و شكله ل 
<2/>شيفرة الصفحة 
OOS‏ > 
ARE‏ 


WWW . 


يمكن وضع عناصر خلف عناصر أخرى عن طريق الخاصية “«2-1006 و ذلك بإسناد رقم 
صحيح إليهاء حيث يتم إظهار العنصر ذو ال “2-1506 الأعلى أمام العناصر الأخرىء لنشاهد 
المثال التالي: 
<html>‏ 
<head>‏ 
<style type="text/css">‏ 
EE‏ ؛ كت د عات ORE‏ < 
img‏ 
1 
position:absolute;‏ 
LEF E: 1 005‏ 
EOE SOE‏ 
z-index: -1;‏ 
1 
</style>‏ 
</head>‏ 
<body>‏ 
1 هتو ان الفقرة < اة 
<img src="imagel.jpg" width="100" height="140" />‏ 
LE OD‏ الك د للش | EE SS‏ للد 40 
z-index‏ 
الخاص يا اأفكل من القيية الاب الي ر انى داري صفر 
CEE‏ 


BS 


3۹ 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


و الذي يبدو في مستعرض الويب كمايلي: 


EX 


| Google 
<< 


që Favorites چ‎ © 1000 Popular JQuery Plugi... 


3-S 


2ت 55> 


> 1117 


@ C\Users\Mukhtar\Desktop\firstPage.htm... 


@ CAUsers\Mukhtar\Deskto... 


مه ال z-index‏ 
التي تساوي 


الشكل ١؛‏ : مثال على استخدام الخاصية 2-1016 


يمكن أيضاً عرض أشرطة تمرير في الحالة التي يكون فيها محتوى العنصر أكبر بكثير من حجمهء 
و ذلك عن طريق إسناد القيمة 56/01 إلى الخاصية /ا017/61110, لنشاهد المثال التالي: 


تحميل المزيد من 


SBE 
<head> 
<style type="text/css"> 
5  ) 1111522 61 ORS EE 


div 


background-color :FOUEEEE; 


EERE 2 5 0 


WWW. ع ل‎ 2 2122-2 3 211303 . com 


E RE ¢ 1 0052‏ كا 
overflow:scroll;‏ 
} 
</style>‏ 
</head>‏ 
SBOE‏ 


<div> 


37 


اك E E‏ للك إن 0 اط E E‏ 
الذي تقرأه الآن سيتم عرض أشرطة التمرير و لهذا سأحاول إطالة 
<2/> النص أكثر بإضافة بعض الكلمات الإضافية إليه. 

GOMES 


> OOS 


CABREL > 


يبدو المثال السابق كمايلي في مستعرض الويب: 


a C\Users\MukhtaiA\Desktop\firstPage.html - Win... 


1 1 C:\Users\ Mukhtar 3 + | 2 | J| Google 


را جا 
ê 1000 Popular jQuery Plugi...‏ چ Favorites‏ و 


4 C\Users\Mukhtar\Deskto... ۵ x hk 
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الشكل ٠١‏ : مثال على عرض أشرطة التمرير للعناصر ذات المحتوى الكبير 


۲۱ 
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واحدات القياس في 55© 


يتم تحديد أبعاد العناصر على سبيل المثال من خلال خاصيتي العرض ”الاس و الارتفاع وام" 


وذلك بإسناد قيم رقمية بالبكسل أو بإحدى واحدات القياس التالية: 


ااا 0ط 

px‏ بكسل 1م130 
% بالنسية المئؤية 50% 
em‏ كل ۱ 6۳ يساوي ١6‏ بكسل 1.5em‏ 
in‏ إنش lin‏ 
cm‏ سنتي ميتر 1cm‏ 
mm‏ ميلي ميتر 100mm‏ 
pt‏ نقطة (النقطة = إنش) 30pt‏ 
عم بيكا (البيكا - ١‏ نقطة = < إنش) 15pc‏ 


الجدول ٠١‏ : واحدات القياس في CSS‏ 


055 BX N٤1 نموذج الصندوق‎ 


عند الحديث عن تصميم صفحات الويب يجب في الحقيقة فهم ما يعرف ب'نموذج الصندوق" أو 
ا8 ×00 بالإنجليزيّة» حيث يتم تمثيل كل عنصر من عناصر مستند ا1۲ عند إنشائه في 
المستعرض بأربعة مستطيلات متداخلة تشكل نموذج الصندوق و هي من الداخل إلى الخارج: 


-١‏ محتوى العنصر 001161/1: و يمثل كل ما هو موجود بين وسمي بداية و نهاية العنصر. 
-١‏ الإزاحة الداخلية 03001790: و تمثل المسافة الفاصلة بين محتوى العنصر و بين حدوده. 
۳- الحدود /©0010: و يمثل الإطار الخارجي للعنصر. 

٤‏ - الإزاحة الخارجية 273101: و تمثل المسافة الفاصلة بين حدود العنصر و العناصر 


الأخرى في المستند. 


۲ 
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يوضّح الشكل التالي نموذج الصندوق: 


الشكل ٤١‏ : نموذج الصندوق امل" ×٥ط‏ 


تتيح 055 لمطوّر الويب التحكم الكامل بكل منطقة من هذه المناطق الأربع عبر مجموعة من 
الخصائص نستعرضها في الفقرات التالية. 


خصائص الحدود 601061 


تسمح 055 لمطور الويب أن يتحكم بحدود العناصر عبر الخصائص 1017/ا-/50/06 و 
eاsty-border‏ و 006-600107» يتم إسناد قيمة رقمية بإحدى واحدات القياس إلى الخاصة 
!8006 تعبر عن مقدار سماكة الحدودء و يتم إسناد قيمة نصية تعبر عن شكل الحدود 
للخاصية ©ال51-/9/06 و التي يمكن أن تأخذ إحدى القيم 001160 للحدود المنقطة و 035160 
للحدود المتقطعة و 5010 للحدود العادية و ©00581ا00 للحدود المضاعفة و 900۷٥‏ و 1006 و 
inset‏ و 0001561 للحدود ثلاثية الأبعادء و يتم إسناد قيمة لونية تعبر عن لون الحدود» لنشاهد 
المثال التالي: 


I EMIL 


<head> 


۳ 
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<style type="text/css"> 
ل‎ Ore كت‎ SEE 
.one 
{ border-style:solid; } 
. two 
{ border-style:dashed; } 
</style> 
</head> 
<body> 
<P <2/>حدود عادية<"ع2ه"->-1355»ه‎ 


<P class=" two">izطقتin <2/>حدود‎ 


BOVE 
> REMI > 
@ cı Users\MukhtaDesktop\firstPage.html - Windows Internet Explorer لكا" لكك أ‎ 


J| Google 2 


€ 2>. 8 C\Users\Mukhtar\! 4 3 


Popular jQuery Plugi... a SQL Injection and Cross-Si...‏ 1000 8 چ Favorites‏ و 


a C\Users\Mukhtar\Deskto... ® يد‎ 5 vl Hm + Pagev Safety v Tools * 


ود عادية 


أا ل ل لاا 
الحدود متقطعة ل 


7 


Done قار‎ Computer | Protected Mode: Off JF 9 125965 > 


4 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


ملحوظة: يمكن تحديد شكل ©ا/501061-851 خاص لكل طرف من أطراف الحدود و ذلك عن طريق إسناد أربعة 
قيم مفصولة بفراغات للخاصية ©1/ا854-/00/061 تمثل الأولى شكل الحد العلوي و الثانية شكل الحد الأيمن و الثالثة 
شكل الحد السفلي و الرابعة شكل الحد الأيسر بالشكل: 


border-style: dotted dashed groove double; 


أو عن طريق الخصائص الفردية border-left-style‏ و border-right-style‏ و border-top-style‏ و 


عالاأ5017061-011017-5, و بالطبع فإن هذه الملحوظة تنطبق على خاصيتي اللون 50106-00101 و العرض 
.border-width‏ 


خصائص الإزاحة الداخلية 0201011090 


يتم تحديد مقدار الإزاحة الداخلية (المسافة بين محتوى العنصر و حدوده) عن طريق الخصائص 
300109-1611م لإزاحة الطرف الأيسر و 0300179-110114 لإزاحة الطرف الأيمن و -300100م 
0 لإزاحة الطرف العلوي و 0300179-5011007 لإزاحة الطرف السفلي» أو عن طريق الخاصية 
9 لإزاحة جميع الأطراف» و يُستّد إلى هذه الخصائص قيم بإحدى واحدات القياس تعبر 
عن مقدار الإزاحة الداخليةء لنشاهد المثال التالي: 


ل اك 
563612 > 
<style type="text/css">‏ 
P‏ 
COlOEEWAIL Ee, |‏ 2127 2 لذ : عدت نمت ك لات تلن 2 2 15 7 لعا ع : كرك 12 فرك ت 61116 1 
.padding‏ 
{ 
padding-top: 25px;‏ 
padding-bottom: 25px;‏ 


padding-right: 50px; 


Yo 
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padding-left: 50px; 
} 


</style> 
</head> 


BOYS 


هذه ك الحجالة |( لعتهر الفترة دون از اجه جوک 
EE OE‏ 
هذه هي حالة عنصر الفقرة مع وجود الإزاحة <p class="padding">‏ 
ع > الك | شه 
</body>‏ 


TIME 


و الذي يبدو في مستعرض الويب كمايلي: 
a C:\Users\Mukhtar\Desktop\firstPage.html - Windows Internet Explorer‏ 
Google‏ و | 22 < ا C\Users\Mukhtar\Dé‏ 6 


qf Favorites چ‎ 0 1000 Popular jQuery Plugi... e SQL Injection and Cross-Si... 
© C:\Users\Mukhtar\Deskto... ® مه‎ 3 


mm + عووم‎ > Safety v Tools * 


هذه هى حالة عنصر لق مع وجود الإزاحة الدا خلية 


Computer | Protected Mode: Off EI HIIR‏ قر 


الشكل ٠٤‏ : مثال على استخدام خصائص الإزاحة الداخلية 


خصائص الازاحة الخارجية 0131011 
يتم تحديد مقدار الإزاحة الخارجية (المسافة بين حدود العنصر و العناصر الأخرى) عن طريق 


الخصائص 703101-16 لإزاحة الطرف الأيسر و 773101-11014 لإزاحة الطرف الأيمن و 


١15 


تحميل المزيد من الكتب : www .learn-barmaga. com‏ 


173101-0 لإزاحة الطرف العلوي و 273191-5011017 لإزاحة الطرف السفلي» أو عن طريق 
الخاصية 7731017 لإزاحة جميع الأطرافء و يُسنّد إلى هذه الخصائص قيم بإحدى واحدات القياس 


تر عن :مقا الأزاحة" الداخلية أو القينة الخاهنة ماتزة ترك هذه اتمه لسرن الويت» 


لنشاهد المثال التالي: 


COLSE 1-27 | 


<0> اما واه 


و الذي يبدو في مستعرض الويب كمايلي: 


تحميل المزيد من الكتب : 


a 2 49 126 15607 6 ear 51-5 ES, 


UAB 


شكشك 0 لمع 


<html> 
>53 361 
<style type="text/css"> 
P 
i CLESCL LOR EEL 
.margin 
{ 
margin-top :100px; 
margin-bottom: 100px; 
margin-right: 50px; 
margin-left: 50px; 
} 
</style> 
</head> 
<body> 
ا‎ 
<P class="margin">ةıجرlزخ إزاحة‎ 


</body> 


</html> 


۷ 


www. learn—-barmaga. com 
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فا ا A‏ 
هده الققره دون إزاحة خارجيه 


Computer | Protected Mode: Off eq + 7 R125‏ تقر 


الشكل 5 ؛: مثال على استخدام خاصية الإزاحة الخارجة 57319015 
إخفاء العناصر 
من الممكن إخفاء عناصر ١171/1‏ باستخدام 088 بطريقتين: 


©» إسناد القيمة ©7017 إلى الخاصية ۷هامكاك. 


٠‏ إسناد القيمة 510067 إلى الخاصية ۷أأاأطأأ۷. 


و الاختلاف بينهما أن الطريقة الثانية تخفي العنصر مع الحفاظ على الحيز الذي يشغله فارغاً أما 
الطريقة الأولى تخفي العنصر مع عدم الحفاظ على الحيز الذي يشغله مما يؤثر على تموضع 
العناصر. 


أنواع عرض العناصر 


يتم عرض العناصر في MN‏ 1لا بطريقتين: 


١78 


تحميل المزيد من الكتب : com‏ . 222302 2 ط- متت 1 www.‏ 


٠‏ بشكل كتلة 1001: حيث يتم النزول سطراً قبل العنصر و النزول سطراً بعد العنصر و 
هذه الحالة نراها مع عناصر مثل <81> و <م> و <۷أك>...إلخ. 

ه بشكل سطري ©10110: حيث يتم وضع العنصر ضمن نفس السطر دون الحاجة للنزول 
سطراً و هذه الحالة نراها مع عناصر مثل <3> و <50380> ...إلخ. 


تسمح 055 بتغيير نوع العرض للعناصر من 2/961 إلى 121106 و بالعكس عن طريق إسناد 
إحدى القيمتين 1061 و ©2115 إلى الخاصية /[ا3ام015. 


opacity الشفافية‎ 


تتيح 055 لمطور الويب التحكم بدرجة شفافية العناصر عن طريق الخاصة ا٥003‏ عبر إسناد 
رقم عشري بين 0.0 و 1.0 إليهاء حيث أن ال٠.٠‏ تعني حالة عدم الظهور و ال ٠.١‏ تعني حالة 
الظهور التام بشكل طبيعي. 


التّعويم 1102311076 


تعتبر خاصية التعويم 1021 من أهم الخصائص التي تقدمها 055 للحفاظ على تموضع متناسق 
للعناصر حيث يتم تعويم جميع العناصر إلى جهة واحدة بالنسبة لعنصر محددء و التعويم في 
5 تعويم أفقي إما إلى اليمين 11914 أو إلى اليسار 16]6. 


عند تعويم عنصر ما فإن العناصر التي تليه سوف تلتف حوله (تعوم) بما يتلاءم و تعويمه؛ أما 
العناصر التي قبله فلن تتأثر بالتعويم» لنشاهد المثال التالي: 
#لسكامة 


<head> 


GS EV E EVOECZ رع ارمع‎ CSS 


DI | ك1 عت 22 لله‎ SELE E, EEX ES AER US EE, U 


YA 
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img { float:right; } 
</style> 
</head> 
<body> 
<P> 
CO EN SS SS SRS 
محئ هى 4ا 2 تھے ما ماوق تھ ما معجلوری نھ ما موق‎ 
E E E E E E E E E o E ال‎ 
مجلو ق لصي ما‎ 
IDS 


</body> 


TIE 


و الذي يبدو في مستعرض الويب كمايلي: 


تحميل المزيد من الكتب : www .learn-barmaga. com‏ 


س 


u 2 7 9 ج‎ 
© C\Users\Mukhtar\Desktop\firstPage.html - Windows Internet Explorer 00 om | 
س الث لم اع ع انض‎ 
© C:\Users\Mukhtar\De: رف ا‎ | 26 || $| Google 
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محتوى نصي ما محتوی نصي ما محتوى نصي ما محتوى 
نصي ما محنوى نصي ما محتوى نصي ما محتوى نصي 
ما محتوى نصي ما محتوى نصي ما محتوى نصي ما 
محتوى نصي ما محتوى نصي ما محتوى نصي ما محتوى 
أم 708 نصي ما محتوى نصي ما محتوى نصي ما محتوى نصي 
في 120 دقيقة ما محتوى نصي ما محتوی نصي ما محتوى نصي ما | 
نختارسيّدسائج محتوى نصي ما محتوى نصي ما محتوى نصي ما محتوى 
نصي ما محتوى نصي ما محثوى نصي ما محثوى نصي 


ما محتوى نصي ما. 


Computer | Protected Mode: Off eq ™) R140% v‏ قار 


الشكل 45 : مثال على استخدام خاصية التعويم 11024 
كما تلاحظ فقد تم تعويم الصورة إلى اليمين من النص و التف المحتوى الذي يليها بما يتلاءم و 
مورشم الصنورة الجر بنذ التعويده و القاف الت بمةا الشكل: المتتاسق لم يكن ادت لوق 
وضع الصورة في هذا الموضع بطريقة أخرى. 


فائدة: جرب تغيير حجم نافذة المستعرض و لاحظ احتفاظ الصفحة بتناسقهاء ثم جرب حذف خاصية التعويم من 


الصفحة و لاحظ الفرق في حال تكرار ذات العملية. 
بالطبع و كما ذكرنا سابقاً أصبح واضحاً الآن أن الخاصية 7034 تقوم بتعويم العنصر إلى جهة 
اليمين أو إلى جهة اليسارء ثمَّ تقوم بتدوير العناصر التالية له لتتلاءم و موضع العنصر المُعَوّم؛ و 
بالطبع يمكن أن يتلو/يسبق العنصر المُعَوّم الحالي أي قدر من العناصر المعوّمّة الأخرى و لهذا 


تحميل المزيد من الكتب : 


WWW . 


عناصر عائمة من اليسار أو 11914 لمنع وجود عناصر عائمة من اليمين أو 0011 لمنع وجود 


عناصر عائمة من الجهتين. 
تعليقات 655 
يتم كتابة التعليقات البرمجية في أوراق الأنماط الانسيابيّة 055 بين */ و /* كمايلي: 


/* COMmment */ 


أنواع الوسائط pesمty Media‏ 


مظهراً و شكلاً معيناً عند استعراضها في مستعرض الويب و منحها مظهراً و شكلاً مختلفاً تماماً 
عند عرضها على الورق (طباعتها)...إلخ. 


يتم تحقيق ما سبق ذكره من خلال وصف نوع 7276013 ما قبل مجموعة قواعد 055)» و نوع 
8 آخر قبل مجموعة قواعد 055 أخرى حيث يتم تطبيق كل مجموعة عند الحالة المذكورة 
في قاعد ال 620176013 لنشاهد المثال التالي: 


<html> 
<head> 


SE EV LE 2 252 LECE دوع‎ 


26013 screen 
1 
1م25‎ 
Eex Esa 11 : ( 1 6ك‎ 


TOR SE EL,‏ 6 2 1 لك 


۲ 
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color:white; 


1 
OCW 


background-color: green; 


@Gmedia print 


{ 
P 
1 
5د‎ - 2 15-011 5 [ 15 21 
6151515 لد عت‎ SEE E, 
CO OE 5 نماض‎ 537 [ 
} 
</style> 
</head> 
<body> 
<P> 


مدا مى المجتوى التسى لمستنةد الوبي الدى ووف يلاو وبطرنفتين 
E CE‏ 5ك E N‏ كاك ES‏ ك0 
الورق/الطباعة. 


B> 


</body> 


> JRE د‎ 


۳ 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


يبدو المثال السابق عند العرض في مستعرض الويب كمايلي: 


e 


© C\Users\Mukhtar\Desktop\firstPage.html - Windows Internet Explorer ١١ oc® 3 


29 C\Users\Mukhtar\De: - > ١ »<ا‎ || 2) Google ع‎ 


qk Favorites م چ‎ 1000 Popular jQuery Plugi... 8 SQL Injection and Cross-Si... 


© C\Users\Mukhtar\Deskto... ۵ وهم | 4 له‎ + Pagev Safety v Tools * 


¥ Computer | Protected Mode: Off 


الشكل ٤١‏ : استخدام القاعدة media‏ @ 


و يبدو على الورق (في نافذة المعاينة قبل الطباعة في الحقيقة) كمايلي: 


Print Preview‏ كم 


El F7 E 1 Page View - | Custom‏ %5 لھا ع 


الشكل ٤١‏ : استخدام القاعدة media‏ @ 


١ 
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يمكن أن نضع بعد هالع" © إحدى القيم التالية: 


القيمة الشرح 

all‏ جميع أجهزة العرض 

aural‏ للأجهزة الناطقة 

braille‏ الأجهزة المعتمدة على اللمس 


embossed‏ | طابعات الأجهزة المعتمدة على اللمس 
handheld‏ للأّجھزة الكفيّة 


print‏ لكل الطابعات 

10 الأجهزة الإسقاط (الراشق مثلاً) 

screen‏ لشاشات الحواسيب 

tty‏ لكل الأجهزة التي تستخدم شاشات ذات عرض محرف ثابت (كالمبرقة الكاتبة). 
tv‏ لكل الأجهزة الشبيهة بالتلفاز 


الجدول ١١‏ : قيم القاعدة media‏ @ 
و بانتهاء حديثنا عن قواعد ال 116013 نكون قد أنهينا -بفضل الله- مناقشة 55© بأغلب 
خصائصهاء و سنتابع في الصفحات التالية استعراض خصائص 055 العصريّة و التي تعرف 
باسم 0853 أمّا الآن فأرى أن نعرض جدولاً بمُحَدّدات 055 التقليديّة ليكون مرجعاً سريعاً عند 


EAR 
0655 دليل محددات‎ 


المحدد مثال شرح المثال 

Mukhtar .class‏ . كل العناصر ذات الواصفة 
"class="Mukhtar‏ 

#name #id‏ کل العناصر ذات الواصفة 


"ld="name 


o 
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2 


130 
130,130 


tag tag 


tag>tag 


tag +tag 


[attribute] 
[attrib ute=v] 


[attribute~=v] 


[attribute|=v] 


:link 
:visited 
:active 
:hover 
:focus 
:first-letter 


:first-line 


تحميل المزيد من الكتب : 


div>a 


div+p 


[src] 


[src=image.jp9] 


[target~= blank] 


[href|=http://] 


a:link 
a:visited 
a:active 
a:hover 
input:focus 
p:first-letter 


p:first-line 


كل الغناصيل 

كل عناصر الوسم <م> 

كل عناصر الوسم <3> و كل 
عناصر الوسم <م> 

كل عناصر الوسم <3> الموجودة 
داخل <۷أك> 

كل عناصر الوسم <3> الموجودة 
داخل <۷> بشكل مباشر 

كل عناصر الوسم <> الموجودة 
مباشرة بعد عنصر <۷أل> 

كل العناصر التي تحوي الواصفة 516 
كل العناصر التي تحوي الواصفة 516 
مسنداً إليها القيمة 57906.00 

كل العناصر التي تحوي الواصفة 
8 مسنداً إليها قيمة لا تساوي 
_blank‏ 

كل العناصر التي تحوي الواصفة 
8 مسنداً إليها قيمة تبدأ ب 
http://‏ 

كل الروابط التي لم يتم النقر عليها 
كل الروابط التي تم النقر عليها 

الرابط الفعال حالياً 

الرابط الذي تمر عليه الفأرة الآن 

كل عناصر الإدخال الفعالة حالياً 

أول محرف من كل عنصر <> 

أول سطر من كل عنصر <> 


p:first-child :first-child‏ كل عنصر <0> يكون الابن الأوّل 
لعنصره الأب 

p:before :before‏ إدراج محتوى قبل كل عنصر <م> 

p:after :after‏ إدراج محتوى بعد كل عنصر <م> 

p:lang(en) :lang(language)‏ تحديد كل عنصر <> تبدأ قيمة 
واصفته ۸9| بالقيمة © 


الجدول ١١‏ : محددات 055 


تحميل المزيد من الكتب : 


CSS 3 


مع تطور مفهوم الويب (خصوصاً مع ظهور ال 2.0 1//685) ظهرت الحاجة إلى تحسين أوراق 
الأنماط الانسيابية لتحقيق تصاميم أجمل في مواقع الويب دون الحاجة إلى الإفراط في استخدام 
برامج التصميم و هذا ما دفع إلى ظهور الإصدار الجديد من أوراق الأنماط الانسيابيّة و المعروف 
ب 6553. 


تضيف 0553 مجموعة من المحددات و الخصائص الجديدة إلى 055 التقليدية و اصطلِحَ على 


تسمية كل مجموعة من هذه الخصائص أو المحددات باسم الوحدة ©1/00101» و لعل أهم الوحدات 


المضافة هي: 


وحدة المحددات الجديدة 

وحدة الحدود و الخلفيات الجديدة 

وحدة تحسين نموذج الصندوق 

وحدة مؤثرات النصوص الجديدة 

وحدة التحويلات الهندسية ذات البعدين 
وحدة التحويلات الهندسية ذات الثلاثة أبعاد 
وحدة الحركات 

وحدة الصفحات متعددة الأعمدة 


وحدة واجهة المستخدم 


المستعرضات الداعمة 


بالنسبة ل 553© فهي مدعومة من أغلب مستعرضات الويب الحديثة و بشكل أوسع بكثير من 
دعم ذات المستعرضات ل 111/15ا. 


تحميل المزيد من الكتب : 


الحدود الجديدة Borders‏ 0553 


تتيح 0553 إنشاء الحدود ذات الزوايا غير القائمة (801706!15 )Round Core‏ بسهولة و 
يسر و دون الحاجة لاستخدام أي من برامج التصميم (مثل 20701051707) التي طالما استخدمت 
لتحقيق هذه المهمة عبر خاصية جديدة هي الخاصية 20006-17390105 و ذلك بإسناد قيمة إليها 
بإحدى واحدات القياس» تعبر القيمة المسندة عن نصف قطر قوس الدائرة المقتطع كزاوية للإطارء 
لنشاهد المثال التالي: 


>42 SEE HAT تجا‎ E LE LS NSO AAD LED HR A 4/1 EAS OA ب‎ 
RC ل دك‎ WITORGOV TERE OSE EOS 


A ERIS 
<head> 
<style type="text/css"> 
Ol 
1 
border:2px solid 17 
padding: 10px 40px; 
background: #dddddd; 
WGI: OOO 
border-radius: 25px; 
-moz-border-radius:25px; /* Firefox 3.6 and earlier */ 
} 
</style> 
</head> 


<body> 


۳۹ 


٠ 0‏ وى | ١‏ 
تحميل المزيد من الكتب : www. learn-barmaga.com‏ 


<div>The border-radius property allows you to add rounded 
corners to elements.</div> 


</body> 


MEM 


و الذي يبدو في مستعرض الويب كمايلي: 


@ firstPage.html 
ج‎ © © file:///C:/Users/Mukhtar/Desktop/firstPage.html %Y يد‎ 


The border-radius property allows you to add 
rounded corners to elements. 


الشكل ٠۹‏ : استخدام خاصية 01061-13011015 في مستعرض كروم 


ملحوظة: مستعرض «1/810! يعتبر أن اسم الخاصية هو -moz-border-radius‏ 


كما تتيح 0553 إنشاء حدود العناصر بالاعتماد على صورة صغيرة تعبر عن أصغر شكل ممكن 
للإطار 


و يتم إنشاء الإطار بطريقتين: 


» 6#»063160: بتكرار جزء من الصورة. 


٠‏ (5]6]0: بتمديد جزء من الصورة. 


الإطار بتكرار جزء من الصورة 


و الشكل الجانبي يوضّح الفرق بين الطريقتين 


الإطار بتمديد جزء من الصورة 


المذكورتين. 
يتم إنشاء الحدود الصورية من خلال تمرير الشكل ٠١‏ : الإطارات الصورية في 6553© 


مسار الصورة إلى الخاصية cborder-image-source‏ ثم إسناد إحدى القيمتين ٥م٠۲‏ أو 
stretch‏ إلى الخاصية ea2مrep-image-orderط»‏ ثم إسناد عرض الإطار بالبكسل إلى 
الخاصية :801061-1730©6-١0/1011‏ و إسناد قيم مناسبة بالبكسل إلى الخاصيتين -/60,06 
!7306-5 و outset-image-0rderط‏ لتحديد جزء الصورة الذي سيتم تكراره أو تمديده 
لصنع الإطار. 


ملحوظة: يمكن استخدام الخاصية المختصرة 00۲0٥6۲-۳398‏ و التي تجمع جميع الخصائص السابقة بالصيغة 


border-image:source slice width outside repeat; 


لنشاهد المثال التالي الذي يعتمد على الصورة التي عُرِضَّت سابقاً لصنع الإطار: 


GT DOC YEE HRM EVEL NCE > NSO DBRS سس‎ 4 7 01 RE ل‎ ENE 
RETOUR. WI OEOVIR(REDINTTUOOSE OES 


AML 
<head> 
<style type="text/css"> 
div 
1 
border-width : 1 2, 
WAGER 25 02 
152 15م‎ : 1055-2 2O, 
-webkit-border-image:url (border.png) 30 30 stretch; 
} 
</style> 
</head> 


<body> 


<div> Here, the image is stretched to fill the area.</div> 


م 
١١‏ ظ 
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مره € 


> 1117 


و الذي يبدو في مستعرض الويب كمايلي: 


J © firstPage.html 


8 © O file:///C:/Users/Mukhtar/Desktop/firstPage.html و عه‎ 
« 


2162 


| Here, the image is stretched to fill the 


@ > ee 


الشكل 5١‏ : الإطار الصوري في مستعرض جوجل كروم 


ملحوظة: مستعرض 11/610 يستخدم البدائة -7702- قبل أسماء الخصائص المذكورة أعلاهء و مستعرضا 


531811 و Chrome‏ يستخدمان البادئة -1أ1ا©/لا- و مستعرض 006/3 يستخدم البادئة -0- 


تتيح 0553 أيضاً إنشاء ظل لعنصر ما عبر الخاصية 00-5130011 و التي يسند إليها قيمة 
لونية تعبر عن لون الظل و قيم بالبكسل تعبر عن إحداثيات الظل» لنشاهد المثال التالي: 


DOCS شخ‎ HINT 2510 LE NSC DED HIME 4 ONES E OMA LL LENE 
"5 28: 7 I WWW.WI. ذا 1 رن قدت‎ 2101-4 1-0-5605 


اله هك 
<head>‏ 
<style type="text/css">‏ 
div‏ 
1 
WAGER: OOO,‏ 
height :100px;‏ 


Dale ES EOUR GS EO OE : Vie LOW, 


1۲ 
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-webkit-box-shadow: 10px 10px 5px #888888; 
} 
</style> 
</head> 
<body> 
E 4 


€ OOS 


</html> 


و الذي يبدو في مستعرض الويب كمايلي: 


: 
© firstPage.html a 


CGC © file:///C:/Users/Mukhtar/Desktop/firstPage.html] bS‏ ج 


الشكل ؟5 : خاصية الظل كما تبدو في مستعرض كروم 


ملحوظة: يستخدم مستعرضا 531811 و ١۳١۸ع‏ البادئة -أ)ا۷6- قبل اسم الخاصية 


الخلفيات الجديدة Backgrounds‏ 0553 


في 0553 تم إضافة خاصيتين جديدتين لمساعدة مطور الويب على التحكم بالخلفيات بشكل 
أفضل» الأولى هي الخاصية 036197010010-5126 و التي تسمح بتحديد أبعاد الصورة الخلفية 
بالبكسل مما يسمح بإعطاء الصورة كخلفية أبعاداً تختلف عن الأبعاد الأصلية للصورة و هو ما لم 
يكز ناً قد » يتم استخدام هذه الخاصية كمايلى: 

ممكناً قبل 0553 يتم استخدام هذه الخاصية كمايلي 


١57 


تحميل المزيد من الكتب : com‏ . 222302 2 ط- متت 1 . اوها 


Da CRS HOUR CS Sze COBDS 6 


يعني الرقم الأول إلى عرض الصورة في حين أن الثاني يشير إلى ارتفاعها. 


ملحوظة: في مستعرض «16]0! تسبق الخاصية بالبادئة -5002- 


أما الخاصية الثانية فهي الخاصية 203610/010000-0,1919 و التي تحدد أحد أجزاء نموذج 
الصندوق ليتم تطبيق الخلفية على أساسه و يمكن أن تأخذ إحدى القيم 0016-0501© لتطبيق 
الخلفية على المستطيل المحدد بالمحتوى أو “0300170-50 لتطبيق الخلفية على المستطيل 
المحدد بالمحتوى و الإزاحة الداخلية معاً أو 070617-00 لتطبيق الخلفية على المستطيل المحدد 
بالمحتوى و بالإزاحة الداخلية و بالحدود و الشكل التالي يوضح الفرق بين المستطيلات الثلاثة. 


border-box 


الشكل ”57 : نموذج الصندوق بالنسبة لخاصية الخلفية في 6553© 


ملحوظة: في مستعرضي 5319/1 و ©01017) يتم استخدام البادئة -أ6kس-‏ 


من التحسينات التي أضيفت إلى خاصية الخلفية في 0553 السماح بإضافة أكثر من صورة في 


قفو اکت ككف لقن ار و نالك عر الق بيع كل فة واک بالفاضلة اک 


Dae 23 12 © 515-07 ma 015 UE (Back UOTE DUEL (Ba CK ORO 


EE 
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خصائص تنسيق النصوص الجديدة في 0553 


ثم إضافة مجموعة من الخصائص الجديدة لتنسيق النصوص في CSS3‏ نعرضص بعضها في 


الجدول التالي: 


hanging-punctuation 


punctuation—trim 


text-justify 


text-outline 


text-overflow 


تحميل المزيد من الكتب : 


none‏ أو first‏ أو 


allow- أو‎ last 
force- أو‎ end 
end 


start‏ أو end‏ أو 


allow-end‏ أو 
adjacent‏ أو 

none 
inter- أو‎ auto 


inter- أو‎ word 
أو‎ ideograph 
أو‎ inter-cluster 
أو‎ distribute 
trim أو‎ kashida 
عن العرض و قيمة‎ 
لونية تعبر‎ 

اللون 


مأله أو 5أ5م[اا© أو 


عن 


string 


١ هع‎ 


تحدد وضع علامة الترقيم خارج حدود 
العنصر <p>‏ 


تزيل علامة الترقيم الافتتاحية من بداية كل 
سطر من أسطر <م> 


تحدد طريقة تحقيق المحاذاة عندما تكون 
قيمة الخاصية 161-3105 مساوية ل 


Justify 


تحدد عرض و لون الحدود الخارجية 


لطر 


النص أطول من العنصر الحاوي له 


WWW. ل‎ © 2 2122-2 3211363 . com 


text-shadow‏ قَيمِتِين رمق ود | فة ظلاً لل 


قيمة لونية 
text-wrap‏ © أو 20081 | تحدد طريقة تحقيق التفاف النصوص 


unrestricted أو‎ 


suppress أو‎ 


normal word-break‏ أو | تحديد طريقة تقسيم الكلمات الطويلة 
break-all‏ 2 أو 
hyphenate‏ 

normal word-wrap‏ أو | تقوم بتحقيق التفاف النصوص عبر تقسيم 


word-break‏ الكلمات الطويلة بناءً على الطريقة المحددة 


في الخاصة word-break‏ 


الجدول ١‏ : خصائص تنسيق النصوص الجديدة في 6553© 


يعرض المثال التالي استخدام إحدى هذه الخصائص: 


لت 6 1 25 2 112 HEMT ARO‏ سل NSO‏ ا ع2 DO CSE HET‏ 
OES‏ 1 ره 1ل لل ا ات ا WM‏ ل كك THE‏ 


CBE 
<head> 
<style type="text/css"> 
A 
1 
text-shadow: 5px 5px 5px #880000 : 
} 
</style> 
</head> 


<body> 
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E‏ ننس اكبظانال<51»ه 


</body> 


</html> 
0553 خصائص الخطوط الجديدة في‎ 
في 55 التقليدية كان من واجب مطوري صفحات الويب استخدام الخطوط الشائعة و الموجودة‎ 
في أغلب حواسيب زوار الصفحة و ذلك أن المستعرض لم يكن قادراً على عرض أي خط غير‎ 
موجود في خطوط حاسوب زائر الموقع» مع 0553© أصبح بالإمكان استخدام أي خط ضمن‎ 
5۲٤٥ صفحة الويب بعد وضع ملف الخط ضمن ملفات الموقع و و إسناد مساره إلى الخاصية‎ 
لقاعدة 1001-1966© الجديدة كلياً و التي تستخدم كمايلي:‎ 
.©101-1520© أولاً- يتم تعريف اسم عائلة جديدة باستخدام القاعدة‎ 
بشكل تقليدي.‎ ٠١-4 ثانياً- يسند اسم العائلة الذي أَنْشِئَ سابقاً إلى الخاصية‎ 


ملحوظة: مستعرض 701067 171617764 يدعم الخطوط ذات النوع 6©01. فقط بينما تدعم باقي المستعرضات 


النوعين أا. و 016. 


لنشاهد المثال التالي: 


ار ا ضرت و U OL‏ ا ا ل ل م 2 
IOS. 85‏ 217 لج 11 أرق مضق 3 بد املاب را مع" 


BEML 
<head> 
<style type="text/css"> 
@Gfont-face 


{ 


font-family: myFont; 


1۷ 
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src: url ('Sansation_ Light.ttf') 


,url ('Sansation_Light.eot') format ("opentype"); /* IE */ 


div 


font-family :myFont; 
} 
S/SEv lez 
</head> 
<body> 


EWE 


03 


كن اة ام اى لكر كلوط مدا الم 
OBL‏ € 
</body>‏ 


CREM S 


التحويلات الهندسية ذات البعدين 0nټTransfornatio 2D‏ 


كا 6953 من اجر فحوولقة. هدم فة البعد: كل حتاضن “السفحة کا لااب 


16 و التدوير 019316" و تغيير الحجم © و غيرها بإسناد أحد توابع التحويل إلى 


الخاصة 32510117]. 


ملحوظة: مستعرض 6010161“ 1016/76 يستخدم البادئة -505- قبل اسم الخاصية» و مستعرض <«1/6]0آ 
يستخدم البادئة -002- و مستعرض 006/3 يستخدم البادئة -0- و مستعرضي 0570076 و 5318/1 يستخدمان 


-webkit- البادئة‎ 


و الجدول التالي يعرض توابع التحويل الجديدة: 


€۸ 


1 : 7 1 | 
تحميل المزيد من الكتب : 0183© . 220263 ط-2212 16 www.‏ 


التابع الشرح 


translate (x,y)‏ ينقل العنصر إلى الإحداثيات الممرة له 

translateX(n)‏ ينقل العنصر على المحور × مسافة ا 

translate (n)‏ ينقل العنصر على المحور لا مسافة ا 

scale(x,y)‏ يغير بعدي العنصر إلى البعدين الممررين له 

١ يغير بعد العنصر × إلى القيمة‎ scaleX(n) 

"١ يغير بعد العنصر ۷ إلى القيمة‎ scaleY (n) 

rotate (0)‏ يقوم بتدوير العنصر بزاوية ,0 

70. يقوم بإجراء تحويل الانحراف وفق الزاويتين »× و‎ skew(Xa,Y a) 
0, يقوم بإجراء تحويل الانحراف على المحور × وفق الزاوية‎ skewX(a) 
0, يقوم بإجراء تحويل الانحراف على المحور ۷ وفق الزاوية‎ skewY (a) 


الجدول ١4‏ : توابع التحويل الهندسي ثنائي البعد في ٥5883‏ 


لنشاهد المثال التالي: 


"لير 1 لك ا 1 لوم ل OTT 4A Ol‏ ا ل 1ل رع ار م م 
لاه عد ا مان ل ا ا ار ا ا لدان 


IA لل‎ 
<head> 
<style type="text/css"> 

div 

1 
-webkit-transform: skew )3 و00‎ , 2004© ( ; 
ACE Ag OOO 
height : 75px; 


Dale KO 1 61561 - عدن لوك‎ : 22 


DOJE : 1! 5> SOLA Black; 
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} 
</style> 
</head> 
<body> 


OEE AS CSS MAGEE LC AS 


</body> 


</html> 


و الذي يبدو في مستعرض الويب كمايلي: 


© firstPage.html u 
ج‎ C O file:///C:/Users/Mukhtar/Desktop/firstPage.html اداه‎ 


الشكل 4ه : مثال على تحويل 5k٥۷‏ في مستعرض جوجل کروم 


ملحوظة: الأحرف 069 التي تم تمريرها بعد الأرقام إلى تابع التحويل تعني درجة 0697568 و ذلك تمييزاً عن 


الراديان و الذي ترمز له الأحرف 30 


تحميل المزيد من الكتب : 


WWW . 


التحويلات الهندسية ثلاثية الأبعاد 4130510111131101 3D‏ 


تتيح 0553 القيام بتحويلات هندسية ثلاثية الأبعاد على العناصر بنفس الأسلوب السابق و لكن 


باستخدام التوابع التي يعرضها الجدول التالي: 


التابع 
translate3d(x,y,z‏ 
translateX(n‏ 
translateY (n‏ 


translateZ(n 


) 

) 

) 

) 
scale3d(x,¥,z) 
scaleX(n) 
scaleY (n) 
scaleZ(n) 

) 


rotate3d(X,Y,Z, a 


rotateX( a 


( 
rotateY (a 
( 
( 


perspective (n 


0 


) 
) 
) 
) 


الشرح 


ينقل العنصر إلى الإحداثيات الممرة له 
يتقل العنصز مسافة :0 على المحور: × 

بلقل العتضي ستافة 0 طلى المحون 6 

ينقل العتصن لمعاف على الميهور 2 
تالكر ال الا اة رة 

يغير بعد العنصر × إلى المقدار ١‏ 

يغير بعد العنصر 7 إلى المقدار ١‏ 

تشر بت الفتضن 2 إلى انار 

يقوم بتدوير العنصر على المحاور الثلاثة بزاوية 
مقدارها ا 

يقوم بتدوير العنصر على المحور × بزاوية .0 
يقوم بتدوير العنصر على المحور 
يقوم بتدوير العنصر على المحور 
يحدد منظور الرؤية 


۷ بزاوية ,0 


> بزاوية .0 


الجدول ٠١‏ : التحويلات الهندسية ثلاثية الأبعاد في 5853© 


الانتقال المتحرك 112310511101 


توفر 0553© طريقة جميلة و مميزة لإنشاء تأثير على عناصر المستند يعرف هذا التأثير الخاص 


باسم الانتقال المتحرك و الذي يتم تحقيقه عبر الخاصية 1310511100 حيث يتم تطبيق قاعدة 55) 
مختلفة عن القاعدة الأصلية للعنصر خلال زمن محدد مما يظهر العنصر بشكل متحرك. 


تحميل المزيد من الكتب : 


١6١ 


WWW. ل‎ © 2 2122-2 3211303 . com 


عن طريق الصيغة: 


EGA له‎ 6212515 7 BEODEEEY 11ت‎ 2 2 


حيث تعبر ٣۷‏ 1076م عن اسم الخاصية التي ستتغير و 0101361010 تعبر عن الزمن و يمكن تغيير 


أكثر من خاصية بالصيغة: 


CEG,‏ 5240127 162 لاك 2 رع مات كرت 1ك 7 كات كه عات لات 11 زع عدت ع ت عم :2211 لك فت لع 


لنشاهد المثال التالي: 


4 986 تخ س1‎ HAMI EU ELC د‎ N SIO ADD EE AO Ea E E oS الت‎ AEN 
BLED WNWWMOWISLOETL LRZBIMIAZ LOOSE IE 


<html> 
head > 
<style type="text/css"> 

div 

1 
width: 100px; 
height: 100px; 
background: red; 
-webkit-transition:width 2s, height 2s; 

} 

div:hover 

{ 
width: 200px; 
height: 200px; 


webkit-transform:rotate (180deg) ; 


YN 
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</style> 
</head> 
<body> 

<div>Hover over me to s the transition effect!</div> 
</body> 


ADE 


ملحوظة: لن أذكر البادئات التي تستخدمها المستعرضات الشهيرة هنا فمن المفترض أنك اعتدت عليها الآن و سأنوه 
إلى أن الحرف 5 بعد القيمة الرقمية يعني أن الزمن بالثانية 560010 


حركات 6553© 


تتيح 0553 إنشاء حركات مخصصة في صفحة الويب مما يغني مطور الويب عن استخدام 
صور ال 7أ9. المتحركة أو تأثيرات 1351 و غيرها ضمن الصفحة» و يتم إنشاء الحركات 
أولاً- يتم تعريف اسم خاص للحركة في القاعدة 16/3006 © و تحديد ماهيتها عبر تحديد 
الوضع الابتدائي 7017 و الوضع النهائي 0ء و بالطبع عند تطبيق الحركة يتم الانتقال من الوضع 
الابتدائي للعنصر إلى الوضع النهائي خلال فترة زمنية مما يجعلنا نشعر بالحركة. 


ثانياً- يتم إسناد اسم الحركة و زمن تنفيذها إلى الخاصية 3017311010 الخاصة بالعنصر. 


لنشاهد المثال التالي: 


الس / الب كت LE MOC DRDO 4 7 41 REARS E‏ ©2726 شاه TI DOCEYEES AUNT‏ 
8 يلقع مق :1 رلك ابرح حا TRV‏ رو رض بوك اتا 1 


<html> 


\or 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


<head> 
<style type="text/css"> 
Gl 7 
1 
كلك لت‎ OOO 
height :100px; 
background: red; 
-webkit-animation:myAnimation 55 : 
! 
@-webkit-keyframes myAnimation 
1 
from {background: red; ( 
to {background:yellow; } 
} 
</style> 
</head> 
<body> 
E E 


</body> 


</html> 

المثال السابق يعرض إنشاء حركة بالاعتماد على الحالة البدائية و الحالة النهائية للعنصر أثناء 

لحركة حيث أن الحالة البدائية تعبر عن شكل العنصر لحظة بدء الحركة و الحالة النهائية تعبر 
عن شكل العنصر لحظة نهاية الحركة. 


١6 
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يمكن تخصيص شكل العنصر في كل لحظة من لحظات الحركة عبر إنشاء قاعدة 055 خاصة 
بهذه اللحظة ضمن قاعدة 307©5آلا©1©© بالشكل: 


@-webkit-keyframes myAnimation 

{ 
0% {background:red;} 
15% {backgroung :green;width:150px;color:white; } 
50% {height: 350px; } 


100% {background:yellow; } 


} 


حيث أن 0% تعني لحظة بداية الحركة و 100% تعني لحظة نهايتها و القيم الأخرى تعبر عن 
فترات أثناء حدوث الحركة. 


ملحوظة: تحدث هذه التغيرات أثناء الحركة و يعود العنصر إلى شكله الطبيعي عند انتهاء الحركة 


الأعمدة المتعددة في 6553© 


تسمح 0553 بعرض محتوى العناصر على شكل أعمدة متعددة 01005ا001-]1 اناالا (على مبدأ 
الجرائد) بطريقتين: 

الأولى - عدد أعمدة ثابت و عرض عمود متغير: و يتم ذلك من خلال إسناد عدد الأعمدة إلى 
الخاصية 6010170-0010171 التي تقسّم المحتوى إلى العدد المذكور من الأعمدة» و يتغير عرض 
الأعمدة مع تغير حجم نافذة المستعرض. 


الثانية- عرض عمود ثابت و عدد أعمدة متغير: و يتم ذلك من خلال عرض العمود الواحد إلى 


الخاصية 1011/لا-01171ا|601 و المسافة بين كل عمودين إلى الخاصية م60|0171-037: و في هذه 


١ هه‎ 


تحميل المزيد من الكتب : com‏ . 222202 2 ط- متت 1 www.‏ 


الطريقة تحافظ الأعمدة على عرض ثابت لكل منها و يتغير عددها مع تغير حجم نافذة 


ملحوظة: تستخدم نفس البادئات المذكورة سابقاً مع خصائص الأعمدة المتعددة. 


المثال التالي يعرض إنشاء الأعمدة المتعددة بالطريقة الأولى: 


لت ل او AON‏ ل ا برهك ا ل وام ا 1 1 
"1471 5 11817 ا قعدام 3ئت اموا رار مع" 


للع ما 
<head>‏ 
<style type="text/css">‏ 
newspaper‏ . 
{ 
-webkit-column-count : 3;‏ 
} 
</style>‏ 
</head>‏ 
<body>‏ 


<div class="newspaper"> 


4 


ENS ES al 
sample content 
EMS MS 2 


this 15 a sample conte this is a sample conten 


sample content this is sample content this is 
this is a sample content this is a sample conten 
sample content 


ERS ES 2 


sample content this is sample content this is 


7 


this is a sample conte this is a sample conten 
sample content 


ERS MHS 2 


sample content this is sample content this is 


this is a sample content this is a sample conten 
sample content 


ESS EAS 2 


sample content this is sample content this is 


3 


this is a sample conte this is a sample conten 


sample content this is sample content this is sample content 


61 OO 61 EO ah ل ال‎ O N OF ak 
61 O 1 EO a ل‎ a O i OS el 


this is a sample content this is a sample conten 


| ١65 
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</div> 
</body> 


>11 


يبدو المثال السابق في مستعرض الويب كمايلي: 


this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content. 


this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 


© firstPage.html 
ج‎ © © file:///C:/Users/Mukhtar/Desktop/firstPage منت‎  ™ 


this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 


الشكل 5ه : إنشاء محتوى بأعمدة متعددة محددة العدد. 


يمكن وضع فواصل ذات مظهر و لون محددين بين الأعمدة عن طريق الخاصية ٥اں٣-صuاco‏ 
بشكل مشابه للمثال التالي: 


column-rule: 4px dotted black; 


CSS3 User Interface واجهة المستخدم‎ 


بالاضافة لما شت 0553 ن يزات لمن يني لهات الزیب تك ست مسموعة من 


التحسينات للمستخدم النهائي للصفحة عبر الخصائص التي يعرضها الجدول التالي: 


١ /اه‎ 


تحميل المزيد من الكتب : 


WWW. ع ل‎ 2 2122-5 3 211303 . com 


الخاصة 


0 


appearance 


icon 


yg nav-down 
gy nav-left 

gy nav-right 
nav-up 


nav-index 


resize 


محددات 0553 


القيم الممكنة 


normal‏ أو icon‏ أو 
window‏ أو button‏ أو 
menu‏ أو field‏ 


auto‏ أو inherit‏ أو رابط 


لصورة 

auto‏ أو inherit‏ أو 
اسم إطار 

عدد صحيح و مميز 


none‏ أو horizontal‏ أو 


both أو‎ vertical 


الشرج 
تحدد لمستعرض الويب كيفية (شكل) 
عرض العنصر ضمن المستند 


تتيح جعل عنصر ما بشكل أيقوني 


تحدد أين سيتم الانتقال عندما يضغط 
المستخدم على مفاتيح الأسهم في لوحة 
المفاتيح 


يحدد العدد المسند إليها عدد ضغطات 
مفتاح 135 اللازمة للانتقال إلى العنصر 
أو بشكل أدق تسلسل الانتقال بين العناصر 
عند الضغط على مفتاح 1302 

تحدد فيما إذاكان من المسموح للمستخدم 


تغيير حجم أحد عناصر ۷ل بشكل يدوي 


الشكل 55 : خصائص واجهة المستخدم الجديدة في 6553© 


تم إضافة مجموعة من المحددات الجديدة في C553‏ نعرضها في الجدول التالي: 


1301-2 


tag[attribute“=v] 


تحميل المزيد من الكتب : 


p~ul 


a[href^="https"] 


١ مه‎ 


كل عنصر قائمة غير مرتبة مسبوق 
كل عناصر الروابط التي تبدأ قيم 
واصفتها ۸۲٥۴‏ بالقيمة 5م61 


WWW. ع ل‎ 3 2122-5 3 211303 . com 


tag [attribute $=v] 


tag[attribute * =v] 


:first-of-type 


:last-of-type 


:only-of-type 


:only-child 


:nth-child(n) 


:nth-last-child(n) 


:nth-of-type(n) 
:last-child 


:root 


:empty 


تحميل المزيد من 


a[href$=".xmI"] 


a[href*="micro"] 


p:first-of-type 


p:last-of-type 


p:only-of-type 


p:only-child 


p:nth-child(2) 


p:nth-last-child (2) 


p:nth-of-type(2) 


p:last-child 


:root 


p:empty 


كل عناصر الروابط التي تشير إلى 
ملفات من النوع [10. 

كل عناصر الروابط التي تشير إلى 
عناوين تحوي القيمة 5010170 

تحديد كل عنصر <0> يكون العنصر 
الابن الأول من نوعه بالنسبة لعنصره 
الأب 

تحديد كل عنصر <> يكون العنصر 
الابن الأخير من نوعه بالنسبة لعنصره 
الأب 

تحديد كل عنصر <0> يكون العنصر 
الابن الوحيد من نوعه بالنسبة لعنصره 
الأب 

يحدد كل عنصر <0> يكون الابن 
الوحيد لعنصره الأب 

يحدد كل عنصر <0> يكون الابن 
الثاني لعنصره الأب 

يحدد كل عنصر <0> يكون الابن 
الثاني لعنصره الأب مع بدء العد من 
الابن الأخير 

يحدد كل عنصر <0> يكون الابن 
الثاني لعنصره الأب 

يحدد كل عنصر <0> يكون الابن 
الأخير لعنصره الأب 

يحدد العنصر الجذر للمستند 


يحدد كل عناصر <0> عديمة 


www. learn-barmaga. com : الكتب‎ 


:target 


:enabled 
:disabled 


:checked 


:not(selector) 


::selection 


تحميل المزيد من الكتب : 


#news:target 


input:enabled 
input:disabled 
input:checked 

:not(p) 


::selection 


المحتوى 

يحدد عنصر #٣٥۴۷‏ الفعال 
حاليأً(الذي تم الوصول إليه عبر النقر 
على رابط يشير إليه داخلياً) 

كل عناصر الإدخال المفعلة 

كل عناصر الإدخال غير المفعّلة 

كل عناصر الإدخال المختارة 

كل العناصر عدا عناصر <م> 

جزء العنصر الذي قام المستخدم 


بتحديده 


الجدول ١5‏ : المحددات الجديدة في 6553© 


الخاتمه 


بهذا نكون قد وصلنا إلى نهاية حديثنا عن 0553 و بهذا يكون الكتاب قد وفى بوعده بشرح لغتي 
15 و 0553 بشكل مكتّف و بسيط و بهذا تكون أنت قد قطعت ربع المسافة في مشوار 
تعلم برمجة الويب» و هنا قد تتساءل : و ماذا بعد؟ و في الحقيقة فإن الخطوة التالية (كما أزعم) 
هي أن تتعلم 561101 31/3ل أو [/©لا©[ ثم تأتي الخطوة المهمة في تعلم إحدى لغات البرمجة من 
طرف السيرفر مثل ۴۳٥۴‏ أو 8552.8/27 لتكون قد قطعت 9985 من الطريق نحو لقب 'مطوّر 
ويب 10617610866 ط6 أما ال %٠١‏ الباقية فتكمن -برأيي- في عملية نفض الغبار و الأتربة 


غم و ا .على اذو لشن فق و دة :هين القزاءة المسمرة و الا وة الا 


أتمتى أن يكون كتابي هذا قد ساهم في إعطائك فكرة جيدة عن لغتي 11۷1-5 و 0553 و أسأل 
الله أن يكون أسلوبه في عرض الأفكار قد راقك و أرضاكء أمّا الآن فسأتركك برعاية الله و حفظه 
و سأدعو لك برحلة هادئة و ممتعة في عالم التطوير للويب» و أنوّه أتني ما أزال أحبو في عالم 
الويب و أتعلّم و أرحّب بأي اقتراح أو استفسار على بريدي الإلكتروني 


mok htar_ss@ hotmail.com‏ و السلام عليكم و رحمة الله و بركاته. 


15١ 


تحميل المزيد من الكتب : com‏ . 2202302 2 ط- متت 1 . وده 


11۲ 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


الفهارس 


11۳ 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


15 


تحميل المزيد من الكتب : com‏ . 2202302 2 ط- متت 1 . وده 


فهرس الأشكال 


الشكل ١‏ : كتابة أول شيفرة ا1 في برنامج المفكرة و حفظ الملف لم اا 
الشكل ۲ : الشكل النهائي في المستعرض لأوّل صفحة مكتوبة باستخدام 1۲۷1 ارا 
الشكل ” : عنصر عرض النصوص <0> عند إضافة واصفة المحاذاة 101ا3 1 0000000 
الشكل 4 : صفحة اختبار عناصر العناوين RS‏ ااا 
الشكل © : صفحة تجربة العنصر </ ۸۲> TEES AS AS‏ ا 
الشكل ٠‏ : التعليقات تظهر باللون الأخضر في نافذة عرض المصدر و لا تظهر في الصفحة. ٠١‏ 
الشكل ۷ : صفحة اختبار عناصر تنسيق النصوص saa‏ 
الشكل ۸ : مثال لاستخدام بعض المحارف الخاصة في الصفحة 0 00 
الشكل 4 : صفحة اختبار عنصر الروابط a‏ اا 


الشكل ٠‏ : صفحة اختبار لعنصر الصور asses‏ ا مط له الو ةق 10/1 
الشكل ١١‏ : استخدام الصور بدلا عن النصوص كمحتوى للروابط e‏ 


الشكل ١١‏ : مثال على صنع خريطة صورية ا م ا ام E‏ و 
الشكل ١‏ : شكل تخيلي لتوضيح المبدأ الهندسي في رسم المناطق الا ا 
الشكل ١5‏ : مثال لقائمة غير مرتبة بسيطة 00 CO‏ 
الشكل ٠١‏ : مثال على قائمة مرتبة بسيطة CONS SR OSE IR‏ 
الشكل ١5‏ : مثال على قائمة معقدة ا ا ام ES‏ 
الشكل ١‏ : هكذا تبدو قائمة المصطلحات في المستعرض الما و الما كرتس e‏ 
الشكل ١8‏ : شكل تخيلي لتوضيح الوسوم المستعلمة لإنشاء الجدول ee‏ 
الشكل ١5‏ : مثال على إنشاء جدول بسيط Os SR‏ 
الشكل 7٠١‏ : رسم توضيحي لأقسام الجدول في ا1۲۷ O DR‏ 
الشكل ۲۱ : مثال لإنشاء جدول ا١1۲‏ مثالي SO SSS SE EA A NE‏ 
٠٥‏ 


تحميل المزيد من الكتب : www. learn-barmaga. com‏ 


الشكل ۲۲ : مثال على إنشاء جدول غير بسيط باستخدام الواصفتين 01/5021 و .colspan‏ لاه 


الشكل ۲۳ : مثال على إنشاء نموذج بسيط VRS SRS a‏ 
الشكل ۲٤‏ : إنشاء نموذج أعقد بقليل VO ESSA SASS E Se a‏ 
الشكل ۲١‏ : مثال على استخدام checkbox‏ و CER ANE 1 1 1 1 1 1 radio‏ 
الشكل 3١‏ : مثال على استخدام عنصر أ56|©0 TOES SDSS‏ 
الشكل ۲۷ : مثال على استخدام العنصر 16713063 OV [1 soe ne oe‏ 
الشكل ۲۸ : مثال على استخدام fieldSet‏ لفط ا أ ا اس ا VSS‏ 
الشكل ۲۹ : استخدام الإطارات بشكل عمودي از[ 0 
الشكل ٠١‏ : استخدام الإطارات بشكل أفقي 00 
الشكل :١١‏ عنصر عرض الفيديو الجديد كما يبدو في مستعرض جوجل کروم ANE‏ 
الشكل ۲۲ : عنصر عرض الصوت الجديد كما يبدو في مستعرض جوجل كروم NS‏ 
الشكل "7: عناصر الإدخال الجديدة كما تبدو في مستعرض كروم 00 
الشكل ٠١‏ : استخدام خصائص مظهر النصوص ا 1[ E aE‏ 
الشكل 5” : استخدام خصائص الخطوط ا ا 


الثاني eNotes eas a‏ 
الشكل ۳۷ : هكذا تبدو صفحة اختبار خصائص الخلفية E‏ 
الشكل ۳۸ : هكذا تبدو صفحة اختبار خصائص مظهر القوائم في مستعرض الويب ما 
الشكل 9" : توظيف 055 لتنسيق مظهر الجداول 111011 1 NESS‏ 
الشكل ٠١‏ : مثال على استخدام خصائص موضّعة العناصر في 655 1 
الشكل 5١‏ : مثال على استخدام الخاصية 2-1506 RS‏ م ااا الل ا NY RS‏ 
الشكل ٤١‏ : مثال على عرض أشرطة التمرير للعناصر ذات المحتوى الكبير 1 
الشكل ٤١‏ : نموذج الصندوق ا|©7700 ×0ط 00000083 00 
3 
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الشكل ٠٤١‏ : مثال على استخدام خصائص الإزاحة الداخلية RSS‏ 


الشكل 55: مثال على استخدام خاصية الإزاحة الخارجة YA AES RS "2۲9١‏ 
الشكل ٠١‏ : مثال على استخدام خاصية التعويم 11021 PENSE SSA ESSE‏ 
الشكل ٤١‏ : استخدام القاعدة 6017760123 ERE‏ 111 1[ 1101011111 
الشكل 58 : استخدام القاعدة 601776012 100011 0 
الشكل ٤۹‏ : استخدام خاصية 50061-17301015 في مستعرض كروم ESS‏ 
الشكل ٠٠‏ : الإطارات الصورية في 553) Is‏ ا لطم 1 
الشكل ١ه‏ : الإطار الصوري في مستعرض جوجل کروم ET SEs‏ 
الشكل ”5 : خاصية الظل كما تبدو في مستعرض كروم ETT‏ ا 
الشكل 07 : نموذج الصندوق بالنسبة لخاصية الخلفية في Eo ES C553‏ 
الشكل ٥٤‏ : مثال على تحويل 5)6۷ في مستعرض جوجل کروم E‏ 
الشكل ٥١‏ : إنشاء محتوى بأعمدة متعددة محددة العدد. Raa‏ 10|/ 
الشكل 55 : خصائص واجهة المستخدم الجديدة في VON SSS 1 C553‏ 
11۷ 
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فهرس الجداول 


الجدول ١‏ : جدول الواصفات المشتركة بين أغلب عناصر 11/1 لا ال ال ال ا 
الجدول ؟ : بعض المحارف الخاصة في ا١1۲‏ 1 1 1 ا 
الجدول ١‏ : القيم المختلفة للواصفة 106 الخاصة بعنصر <ألام١|> ie‏ 
الجدول ؛ : دليل وسوم ا1۲۷ 0000000 VN‏ 
الجدول © : واصفات العنصر <0علİأ۷> e e‏ 1 ااا NE‏ 
الجدول ٦‏ : واصفات العنصر <1/1060> 000 
الجدول ۷ : أنواع عناصر الإدخال الجديدة في 5 ا١1۲ AV‏ 
الجدول ۸ : بعض طرق كائن العنصر <0311/35> Tees‏ 
الجدول ٩‏ : دليل الوسوم الجديدة في 5 ا١1۲‏ 0000 1 0 
الجدول ٠١‏ : واحدات القياس في 55) مو ا ا 111 
الجدول ١١‏ : قيم القاعدة TO SRS @media‏ 
الجدول ١١‏ : محددات 055 E‏ ا INES‏ 
الجدول ٠١‏ : خصائص ننسيق النصوص الجديدة في Ra ٣٥553‏ 1007000 
الجدول ١5‏ : توابع التحويل الهندسي ثنائي البعد في 5583© لا ور ل 
الجدول ١5‏ : التحويلات الهندسية ثلاثية الأبعاد في 6553© OE SSE‏ 
الجدول ٠١‏ : المحددات الجديدة في 6553© OSES SS‏ 
۱۹ 
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فهرس المحتويات 


الإهداء Vedula daemons‏ 
تنويه NE ONE RONSON OS‏ 
بين يدي الكتاب ملساو اساسا Me AERO SAS‏ 
مقدمة SES SER SE‏ ار O SA‏ 
ما هي 71/1 ؟ VOSS O SRR RES‏ 
كيف أبدأ في تعلم كتابة مستندات 1۲۷1 ؟ 1 
المثال الأول في لغة 1۲١۷1‏ 6 ااا 0 1 اال 
عناصر 1101لا EASE ADESSO ARES ORR‏ 
الفراغات TA Sai Sea a Se WnHıTE SPACES‏ 
الشكل العام لعناصر ا1۲۷ eee‏ 1 
الشكل العام لصفحات HTML‏ ا 3 
واصفات الوسوم 2778180125 SS‏ مات ماه موا الو م 11 
عناصر العناوين 65 ١اممعلا SSS SÎ‏ م لكو و 
عنصر الخط الأفقي HORIZONTAL LINE‏ 000011111 
التعليقات Tace OSA EAT COMMENTS‏ 
عناصر النصوص ۴۸8۸۸6۸۸۶۸8 Fea ROARS‏ 
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عناصر تنسيق النصوص 76 مهمع Fede ORES TEXT‏ 


المحارف و الرموز الخاصّة SpEclAL CHARACTERS‏ اسح اميا اح ESCA‏ 
عناصر الروابط aaa OCR HYPER LINKS‏ 2 717 
عناصر الصور 5عههماا Nee RS‏ 
الور :يد ل موك ال 1 ذ1 1[ [ز 1[ 000 
الخرائط الصوريّة ۷۸۴8 Eoin ase |۷۸6٤‏ 
الروابط الداخليّة Cease e eee ESS INTERNAL LINKING‏ 
القوائم 575 ا لطن أو عأ خط الو قر كط واو وم نيه اام CE ROSEN ANOS‏ 
الجداول 5غا8قم1 E‏ ال لاق الفا ناا اخد لظ باو ا 5 
الجداول غير البسيطة 3-000 
النماذج ۴0۸۷8 310000000 
تقسيم عناصر الإدخال إلى مجموعات 1010110000 
الإطارات eee esasi a RSS eR: FRAVES‏ 
عناصر ال Velie ieee eee ei M٤7۸‏ 
دليل وسوم ا1۲۷ VE eos ehe E Seas‏ 
Sea SES XHTML‏ ممه 0 VN saree a Se DOE‏ 
قواعد Vee ODS O XHTML‏ 
تعريف نوع المستند <ع000175!> i EEE‏ 
الأنواع المختلفة للمستند NE‏ 
التحقق من صحة صفحات 01/غ171ناكا NV a oa‏ 
۷۲ 
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مستعرضات الويب الداعمة ل 5 Neier H۲ M1‏ 
عنصر الفيديو مءما/١ NYAS OSES‏ 
عنصر الصوت وامنام ال ط توم NOES OE ROSES AR‏ 
عناصر النماذج ۴0۸۷8 a AS‏ للع جد روا أله عله فلع ظعاو جا علاط فا Nessa‏ 
عنصر الْمَرسَم en ٥۸۸۷۸8‏ ا ل ال لق أو ا QS SESS‏ 
تخزين البيانات من طرف العميل Nese eee‏ 
دليل الوسوم الجديدة في 5 ا١1۲ ATR RONG‏ 
مقدمة ا ا 
ما هي 055 ؟ AVA SE O ESSERE SS‏ 
مشكلة مطوري الويب قبل O E ٥8S‏ 
البدء في استخدام 055 ARRAS AA SOL‏ [ 0110111 
شيفرات 655 ara eS eA ERRsA‏ 
خصائص مظهر النصوص ea iad‏ ا ا eV‏ 
خصائص الخطوط ورمع VEO eae Se e‏ 
خصائص مظهر الروابط eee eee‏ مق و مقو فح ما ا 
خصائص الخلفيات ENS [15 BACKGROUNDS‏ 
خصائص مظهر القوائم “بز ز ز ز ز ‏ ا ا E‏ 
خصائص مظهر الجداول Tres‏ 
خصائص الموضّعة Nee eae ۲08۱7۱0۸۱ NG‏ 
۷۲ 
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Tse ESSER SS 055 واحدات القياس في‎ 


نموذ ج الصندوق VETE SA CSS Box MoDEL‏ 
خصائص الحدود BORDER‏ 00101 ااا 
خصائص الإزاحة الداخلية ۲۸00۱۸6 TOES‏ 
خصائص الإزاحة الخارجية TUES ۷۸۴6|۸١‏ 
إخفاء العناصر saa‏ اا 
أنواع عرض العناصر IAs ales aa‏ 
الشفافية STV UG OSA RGSS a 0۲۸٥١۲۷‏ 
التّعويم Tareas ale SS FLOATING‏ 
تعليقات ٥88‏ ا ااي E E O‏ 
أنواع الوسائط TY E SS RSS MEDIA TYPES‏ 
دليل محددات 6055 ما ا للد ءالا مجو الع اق أ وك اماج وإ أ اق اا اماج 1177 
CSS 3‏ اا اا 
المستعرضات الداعمة TAs 0 SSS Saa‏ 
الحدود الجديدة Tisai eo a SA es CSS3 BORDERS‏ 
الخلفيات الجديدة CSS3 BacKGROUNDS‏ 0 ااا 
خصائص تنسيق النصوص الجديدة في EO ur ٥883‏ 
خصائص الخطوط الجديدة في 6553© 110 1[ 1 00 
التحويلات الهندسية ذات البعدين FEN SSS 2D TRANSFORW۸^T7ION‏ 
التحويلات الهندسية ثلاثية الأبعاد ۸710۸ N8۶0۸‏ 1۸۸ 30 ا OY ace o‏ 
۷٤‏ 
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التحصيل 


تحميل المزيد من الكتب : 


عن مؤلف الكتاب 


علميّة 
الاسم الصريح : مختار فؤاد 
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مكان و تاريخ الميلاد : سوريا 
اا 


(سيرة ذاتية) 


الاسم المستعار للأعمال الأدبيّة : مختار 
الكمالي. 


ماجستير في تقانات الويب - الجامعة الافتراضيّة السوريّة - طالب حتّى 


تاريخه. 


إجازة في هندسة الحاسوب و المعلوماتيّة بمعدّل جيّد جدَاً - الجامعة السّوريّة 


.75١١١ - الدوليّة‎ 


ثانويّة عامّة - الفرع العلمي - ثانويّة فايز منصور بالبوكمال - .٠٠٠٠٦‏ 


مهندس برمجيّات ويب - بين 
عامّي ۲ و 191۳~ 
شركة عجرم للتكنولوجيا - 
دمشق. 

مهندس برمجيّات - عمل حر 
-بينَ عامي ٠٠٠٤‏ و 
0۰ 


٠‏ متفرغ للعمل الإبداعي منذ عام 
۳ 
م قافرا عاميّاً ثمَّ انتقل للشعر 


الفصيح في بداية ۷ 


إصداراته 


ه مشروع الفراهيديّ من النظريّة ٠ ١‏ في غَيَابَة الحُبّ - شعر - دائرة 


حتّى التطبيق البرمجي - كتاب التقافة و الإعلام بالشارقة - 
إلكتروني مجّاني - دمشق ۲ 1. 
۳ 


هء C553‏ & 5اH1M‏ الخطوة 
الأولى نحو ويب المستقبل - 
كتاب إلكتروني مجانيّ - 
البوكمال - .۲١٠۳‏ 

٠‏ تعلّم ل/©لا©[ في ١١١‏ دقيقة 
- مكتبة المورد للكمبيوتر - 
دمشق .58١١-‏ 

ه 51006 Game‏ (3 طريقك 
نحو برمجة الألعاب - ملحق 
مجّاني مع مجلّة ۴1 التقنيّة 
- دمشق .56١5-‏ 
المقالات التقنيّة في عدد من 
المجلت المطبوعة و 
الإلكترونيّة المتخصصة. 


Programming Languages:‏ لا 


e Desktop: C#, VB.NET, ١/86, Java. 
e Web: 
o Server-Side: ASP.NET classic and ASP.NET MVC, 
PHP Classic & PHP MVC using Codelginiter 


framework., JSP. 
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الجوائز و 
المشاركات 


تحميل المزيد من الكتب : 


o Client-Side: HTML 5, CSS 3, java script & jQuery. 


o Technologies: XML, JSON. 


e Smart phones: Android programming. 


[] Database: SQL Server, MySQL, MS-Access. 


مسابقة أفضل برمجة و تصميم 
موقع ويب بتقنيّة 2.52.0027 
المنظّمة من قبل موقع 
المبرمجين - vb4ara6.٥0۳"‏ 
المركز الأوّل عن مشروع موقع 
مدينة أبوكمال - عام .۲٠٠۹‏ 
متتابقة المخلوماقية الفركزيكة 
الثالثة عشرة - جامعة البعث - 
حمص ۲۰۰۹. 

المؤتمر العلمي الثاني - 
الجامعة السورية الدولية للعلوم 
و التكنولوجيا - دمشق .۲٠٠۸‏ 
أولمبياد المعلوماتيّة السوري 
الراببع - الجمعية العلمية 
السورية للمعلوماتية - دمشق 
۷ 

ستستايقة المعو ماتة الموكزيية 
الحادية عشرة - جامعة البعث 


حمص ۷ 


Misc.: MS-Word, MS-PowerPoint, Photoshop, Maintenance‏ لا 


skills 
- تصفيات مهرجان أمير الشعراء‎ 
الموسم الخامس - الإمارات‎ 
.٠١٠۳ - العربيّة المتحذة‎ 
- جائزة الشارقة للإبداع العربيَ‎ 
الإمارات العربيّة المتحدّة - المركز‎ 
.3١١١ - الأول‎ 
- تصفيات مهرجان أمير الشعراء‎ 
الموسم الرابع - الإمارات العربيّة‎ 
.5١١١ - المتحدذة‎ 
- جائزة الإبداع التشعريّ للطلبة‎ 
الجامعة السورية الدولية - المركز‎ 
.3١١١- الأول‎ 
شارك في عدد كبير من الأمسيات‎ 
اا ا ا شل‎ 


سوریا. 


ه مسابقة المعلوماتية المركزية 
اللاذقيّة .3٠١٠١6‏ 
الاختراع (ورشة البرمجيّّات) - 
حماة .5٠٠١6‏ 

٠‏ الملتقى العربي الثالث 
للمبرمجين الشباب (ورشة 
البرمجيات) - حلب ”3 - 
المركز الثالث عن مشروع نظام 
مكاتب الحوالات الصوتي ". 

٠‏ أولمبياد المعلوماتيّة السوري 
الأول - الجمعية العلمية 
السورية للمعلوماتية .2 دمشق 
55 - الميدالية الفضية. 


العناوين ٠‏ العنوان الحالي : سوريا - دمشق 
٠‏ بريد إلكتروني : صmokhtar_ss@ho(mail.c0‏ 


تحميل المزيد من الكتب : 


